[CSS] Safari 에서 Rotate Animation 을 심을 때의 주의점

컴포넌트에 CSS Animation 을 넣을 때 두 가지의 방법이 있다.

 

하나는, Transition 을 사용하는 방법

다른 하나는, Key-frame 을 사용하는 방법

 

여기서 Transition 은 간단한 애니메이션을 구현할 때 사용하기 편한 속성이다. 예를 들면, 마우스가 객체 위에 올라갈 때 해당 객체의 Background Color 를 변경하는 것이 될 것이다.

 

하지만, 여러 속성들을 함께 움직이게 만드는 것에서는 Transition 보다 Key-frame 을 사용하는 것이 훨씬 더 효과적으로 애니메이션을 적용할 수 있다.

---

위에 까지는 간단한 개념이었고, 프론트엔드/퍼블리싱에 기웃기웃 거렸던 나에게는 제대로 된 브라우저 호환성에 대한 코딩이 조금은 번거로운 일이었다. 그래도 대중적으로 사용되는 여러 브라우저 (크롬, 482, 삼.브, 익스, 파폭)에서는 같은 화면을 보여줘야 하기 때문에 여러 자잘자잘한 작업을 했었고, 그 중에서 객체에 Rotate Animation 을 입히는 작업이나 Transform 속성을 다루는 애니메이션 에 대해 기억할 만한 요소인 것 같아 기록을 해보려고 한다.

---

 

처음에는 다른 브라우저 신경 쓰지 않고 Chrome 베이스에서만 개발해서 너무나 잘 작동되어서 그냥 이렇게 사용하면 되는 구나 했는데, Safari 에서는 제대로 작동을 하지 않아 "이건 뭐지이..?" 했었다.

 

문제의 CSS Key-frame 은 이랬다.

 

@keyframes rotate-in-left-to-right {
    0% { transform: translateX(-300%) scale(0.3); }
    40% { transform: translateX(0) scale(1.0); }
    41% { transform: rotate(0deg); }
    100% { transform: rotate(630deg); }
}

 

왼쪽에서 오른쪽으로 온 다음 마지막에 회전을 하는 애니메이션이다. 문과적인 스토리텔링으로 해당 Key-frame 을 읽어보자면,

 

1. 현재 기준 X 좌표에서 -300% 밖에서 0.3배의 크기로 시작하고

2. 현재 기준 까지 점점 사이즈가 복구되며 레이어가 왔다가

3. 630도 (1바퀴 + 270도) 정도 돌고서 애니메이션을 끝낸다.

 

인데, 이 코드는 정작 Chrome 과 삼성브라우저에서는 너무 잘 되어서 맞는건가 보다 했다. 그런데, 브라우저 호환 테스트를 하는 중에 Safari 에서는 돌다가 만다는 것이었다. 확인해보니 정말 돌다가 말았다. 분명히 도착지까지는 제대로 오는데 한바퀴를 휘리릭 돌고 끝내야 될 놈이 90도씩만 움직이고 애니메이션을 마치는 것이었다.

 

어떻게 해야 할 지 몰라서 역시나 구글링을 돌려봤는데 딱히 마땅한 결과를 발견할 수 없었고, translate 값을 제외하고 rotate 만 할 경우에는 제대로 작동 하길래 이건 뭔가 빼먹은게 있나 보구나 해서 여러 조합을 해봤다.

 

결국 찾은 조합은 바로..

@keyframes rotate-in-left-to-right {
    0% { transform: translateX(-300%) scale(0.3) rotate(0deg); }
    40% { transform: translateX(0) scale(1.0) rotate(0deg); }
    100% { transform: translateX(0) scale(1.0) rotate(630deg); }
}

 

이렇게 하니 잘 돌아가는 것이었다. 결론은, transform 에 여러 속성을 조합 했었다면 Key-frame 에 사용되었던 모든 transform 속성 값들을 작성해 주어야 한다는 것이었다.

 

테스트로 translateX 하나를 translateY 로 바꾸고 애니메이션을 작동시켜 보았는데 돌다가 말아버리는 같은 현상을 발견할 수 있었고, transform 에서 사용했던 모든 속성들이 일치해야 되는 것이었다.

 

이렇게 또 하나 CSS 에 대해 알아간다