모션 선택 기준

전환은 상태 변화, 애니메이션은 시간표를 설계할 때 쓴다

상태 전환 관점

움직임을 넣기 전에 사용자의 행동으로 한 속성만 바뀌는지, 여러 장면을 순서대로 재생해야 하는지 먼저 구분하면 CSS 선택이 쉬워집니다.

Transition

hover, focus처럼 시작과 끝 상태가 분명한 변화에 맞습니다.

Animation

등장, 반복, 단계별 변화처럼 keyframes가 필요한 흐름에 맞습니다.

Duration

너무 짧으면 거칠고 너무 길면 인터페이스가 느리게 느껴집니다.

Reduced motion

중요 정보는 움직임 없이도 읽히도록 정적 상태를 남깁니다.