Transition과 Animation 차이
hover처럼 시작과 끝이 있는 변화는 transition, 여러 장면을 제어하면 keyframes animation이 맞다.
| 구분 | Transition | Animation | 선택 기준 |
|---|---|---|---|
| 트리거 | 상태 변화가 있어야 시작 | 자동 또는 반복 실행 가능 | 사용자 행동에 반응하는가 |
| 장면 수 | 시작값과 끝값 중심 | 여러 keyframe 단계 | 중간 장면이 필요한가 |
| 반복 | 보통 한 번 변화 | 반복, 방향, 지연 제어 | 계속 움직여야 하는가 |
| 용도 | hover, focus, open/close | 로딩, 강조, 안내 동작 | 동작이 사용자를 방해하지 않는가 |
| 접근성 | 짧고 예측 가능한 변화 | prefers-reduced-motion 고려 | 움직임 줄이기 설정을 존중하는가 |
모션 선택은 효과 이름보다 변화가 무엇으로 시작되고 몇 단계로 진행되는지로 판단한다.