css motion
CSS 움직임 선택 지도
트랜지션은 상태가 바뀔 때 부드럽게 이어 주고, 애니메이션은 여러 장면을 시간표처럼 제어한다. 먼저 움직임의 원인이 이벤트인지 시간표인지 나눈다.
01
Trigger
hover, focus, click처럼 상태 변화가 있는지 확인한다.
02
Property
색, 투명도, transform처럼 바꿀 속성을 고른다.
03
Timing
duration, delay, easing으로 변화 속도를 정한다.
04
Repeat
반복과 중간 장면이 필요하면 keyframes를 사용한다.
| 기법 | 출발 조건 | 제어 단위 | 좋은 사용처 |
|---|---|---|---|
| Transition | 상태가 바뀌는 순간 | 시작 값과 끝 값 | 버튼 hover, 포커스 피드백 |
| Animation | 시간표나 반복 설정 | 여러 keyframe 구간 | 로딩, 루프, 복합 움직임 |
| No Motion | 정보 전달이 더 중요함 | 정적 상태 | 폼 오류, 긴 본문, 접근성 우선 화면 |
짧게
상호작용 피드백은 빠르고 눈에 걸리지 않게 둔다.
명확히
움직임은 상태 변화의 의미를 설명해야 한다.
배려
과한 반복은 피하고 reduced motion 환경을 고려한다.