CSS 트랜지션은 웹 페이지에서 요소들이 변화하는 것을 조금 더 부드럽게 만들어주는 기능입니다. 이러한 부드러운 움직임을 통해 유저들은 불편함 없이 변화를 감지할 수 있습니다. 따라서 적절한 CSS 트랜지션의 사용은 유저의 경험(UX)을 개선하고 애플리케이션의 완성도를 높일 수 있습니다. 유저는 애니메이션의 움직임을 설명할 수는 없더라도 이러한 움직임이 적절한 움직임 인지, 세련된 움직임인지를 예리하고 직관적으로 알아챌 수 있기 때문입니다. 그렇다면 적절한 트랜지션 및 애니메이션을 주기 위해서는 어떻게 해야 할까요? 1. 생각하는 것보다 더 짧게 유저들은 우리 생각보다 인내심이 없습니다. 아무리 멋진 애니메이션이더라도, 필요 이상으로 오래 기다리고 싶지 않다고 합니다. 따라서 생각보다 아주 짧게 만들었다가 조금씩 늘려나가는 방법을 추천하고 있습니다. 단일 트랜지션은 0.15 ~ 0.4초가 적절하다고 합니다. 2. 적절한 가속과 감속 애니메이션이 부자연스럽다면 갑자기 시작하거나 끝나기 때문이라고 합니다. 아주 미미한 차이일지라도, 실제 세계의 움직임처럼 cubic-bezier(CSS 곡선 모델) 커브에 적절한 easing-in/out을 추가하여 완급 조절을 하는 게 좋다고 합니다. cubic-bezier에 어떤 곡선 값을 추가해야 할지 모르겠다고요? VS Code 에디터에서는 자동 완성 기능이 있어서 cubic-bezier를 입력하면 자동으로 옵션 값이 드롭 다운으로 표시됩니다. 3. 적을수록 좋다(?) 너무 많은 움직임은 득보다 실이 많을 수 있습니다. 가령 opacity는 0에서 1보다는 0.4에서 1과 같이 더 작은 범위를 사용하는 게 더 자연스럽게 느껴질 수 있습니다. 동작이 많이 바뀔수록 전환이 과도하게 보일 수 있습니다. 너무 많은 것을 하는 것은 오히려 아무것도 하지 않는 것보다 나쁠 수 있습니다. 이 외에도 하드웨어 가속에 의존하는 CSS 속성들의 사용 및 필요시 will-change 사용 등 더 나은 트랜지션을 위한 10가지의 팁을 안내하고 있으니 관심 있으신 분들은 방문하여 보시기를 추천드립니다.