motion review
CSS 움직임 마무리 점검표
장을 마무리할 때는 속성 이름을 외우는 것보다 움직임의 목적, 트리거, 시간 제어, 반복 여부, 접근성 영향을 한 번에 점검하는 것이 중요하다.
01
목적
움직임이 사용자의 상태 이해를 돕는지 먼저 본다.
02
트리거
상태 변화인지, 자동 재생인지 구분한다.
03
시간
duration, delay, easing이 과하지 않은지 본다.
04
완료
fill-mode와 최종 상태가 화면 의도와 맞는지 확인한다.
| 점검 축 | Transition | Animation | 주의점 |
|---|---|---|---|
| 시작 조건 | 속성 값 변경 | keyframes 실행 | 자동 실행 여부를 헷갈리지 않는다. |
| 제어 범위 | 시작과 끝 | 여러 중간 장면 | 복잡한 동작을 transition에 억지로 넣지 않는다. |
| 반복 | 상호작용마다 1회 | 반복 횟수 설정 | 무한 반복은 사용자의 피로를 만든다. |
성능
가능하면 opacity와 transform 중심으로 움직인다.
의미
움직임이 상태 변화를 설명하지 못하면 제거한다.
검증
마우스, 키보드, 모바일 터치에서 모두 확인한다.