Duration
트랜지션과 애니메이션의 시간을 통일하여 인터페이스 전반에 일관된 속도감을 제공합니다.
Duration Scale
즉각적인 반응부터 느린 전환까지, 7단계 애니메이션 속도
duration-instant0ms즉각적인 변경, 전환 없음
호버해서 확인
duration-fast100ms호버, 포커스
호버해서 확인
duration-micro150ms버튼, 마이크로 인터랙션
호버해서 확인
duration-normal200ms일반적인 UI 전환 (기본값)
호버해서 확인
duration-slow300ms모달, 드로어 열기/닫기
호버해서 확인
duration-slower400ms복잡한 애니메이션
호버해서 확인
duration-slowest500ms페이지 전환, 큰 요소의 변화
호버해서 확인
duration-spin1000ms로딩 스피너 (무한 반복)
호버해서 확인
Component Demo
실제 UI 컴포넌트에서 속도 차이를 체감해보세요
Button Hover
150msduration-micro
Dropdown
200msOption 1
Option 2
duration-normal
Modal
300msduration-slow
Interactive Demo
각 박스는 서로 다른 속도로 이동합니다.
100ms150ms200ms300ms400ms500ms1000msUse Cases
자주 사용하는 UI 패턴별 권장 애니메이션 시간
호버 효과100ms
duration-fast링크, 아이콘 호버 시 색상 변화
버튼150ms
duration-micro버튼의 호버, 활성 상태 전환
드롭다운200ms
duration-normal메뉴 펼침/접힘
모달200ms / 100ms
duration-normal / fast모달 등장(normal)과 퇴장(fast) 애니메이션
페이지 전환500ms
duration-slowest페이지 간 페이드 전환
| 패턴 | 권장값 | 설명 |
|---|---|---|
| 호버 효과 | duration-fast(100ms) | 링크, 아이콘 호버 시 색상 변화 |
| 버튼 | duration-micro(150ms) | 버튼의 호버, 활성 상태 전환 |
| 드롭다운 | duration-normal(200ms) | 메뉴 펼침/접힘 |
| 모달 | duration-normal / fast(200ms / 100ms) | 모달 등장(normal)과 퇴장(fast) 애니메이션 |
| 페이지 전환 | duration-slowest(500ms) | 페이지 간 페이드 전환 |
Best Practices
✓
권장
- ✓작은 요소에는 짧은 시간(100–200ms)
- ✓큰 요소에는 긴 시간(300–500ms)
- ✓사용자 대기 시간 최소화
- ✓접근성 모션 설정 존중
✕
지양
- ✗500ms 이상의 긴 애니메이션
- ✗빈번한 인터랙션에서의 느린 전환
- ✗일관성 없는 속도 혼용
- ✗불필요한 애니메이션