Foundations
Motion (모션)
상태 전환의 기본은 var(--duration-base) var(--easing-out). 모션은 의미(상태가 바뀌었다)를 전달하는 도구이지 장식이 아니다.
Duration
| 토큰 | 값 | 용도 |
|---|---|---|
--duration-instant | 0ms | 즉시(툴팁 표시) |
--duration-fast | 100ms | 마이크로(호버·포커스) |
--duration-base | 150ms | 기본(버튼·탭 상태) |
--duration-moderate | 200ms | 패널(드로어·아코디언) |
--duration-slow | 300ms | 화면 전환 |
--duration-slower | 500ms | 강조 연출 |
--duration-reveal | 700ms | 스크롤 리빌 |
Easing
| 토큰 | 값 |
|---|---|
--easing-standard | cubic-bezier(0.2, 0, 0, 1) |
--easing-out | cubic-bezier(0.16, 1, 0.3, 1) |
--easing-in | cubic-bezier(0.4, 0, 1, 1) |
--easing-in-out | cubic-bezier(0.4, 0, 0.2, 1) |
--easing-linear | linear |
규칙
@media (prefers-reduced-motion: reduce)에서 전환·애니메이션을 제거한다 — 모든 컴포넌트 공통.- transform·opacity만 애니메이션한다(레이아웃 속성 애니메이션 금지 — 성능).