9. 모션
9-1. 시간 · 이징
--dur-instant:100ms; --dur-fast:160ms; --dur-base:240ms; --dur-slow:360ms; --dur-page:480ms;
--ease-standard:cubic-bezier(.4,0,.2,1); --ease-decelerate:cubic-bezier(0,0,.2,1);
--ease-accelerate:cubic-bezier(.4,0,1,1); --ease-emphasized:cubic-bezier(.2,0,0,1);9-2. 원칙
- 의미 있는 모션만 — 상태·위치·관계를 설명할 때만. 장식적 애니메이션 지양
- 빠르고 짧게 — UI 피드백은 160~240ms
- 한 화면에 하나의 주인공
- 진입은 감속, 이탈은 가속
- 접근성 필수:
@media (prefers-reduced-motion: reduce)— 토큰 파일에 내장되어 자동 적용
9-3. 표준 패턴
| 상황 | 모션 |
|---|---|
| 호버 | 배경·색 --dur-fast 페이드 |
| 버튼 누름 | transform: scale(.98) --dur-instant |
| 드롭다운·툴팁 | opacity + translateY(-4px→0) --dur-base --ease-decelerate |
| 모달 | 오버레이 페이드 + 카드 scale(.98→1) --dur-slow |
| 바텀시트 | 아래에서 translateY --dur-slow --ease-decelerate |
| 토스트 | 아래에서 진입, 3초 후 페이드 아웃 |
| 스켈레톤 | 좌→우 shimmer 1.2s 무한 |