애니메이션 트랜지션 타이밍
애니메이션 지속 시간과 이징 함수 가이드라인
지속 시간 가이드라인
50-150ms
마이크로 인터랙션
• 버튼 호버 상태
• 체크박스 토글
• 아이콘 색상 변경
• 투명도 변화
150-300ms
작은 요소
• 드롭다운 열기
• 툴팁 나타남
• 카드 호버
• 메뉴 항목
300-500ms
중간 요소
• 모달 열기/닫기
• 사이드바 확장
• 페이지 섹션 드러남
• 카드 뒤집기
400-700ms
큰 요소
• 페이지 전환
• 전체 화면 오버레이
• 복잡한 시퀀스
• 라우트 변경
이징 함수 (Easing Functions)
ease-out
요소가 뷰에 들어올 때
드롭다운, 모달 등장
ease-in
요소가 뷰에서 나갈 때
드롭다운, 모달 사라짐
ease-in-out
위치나 크기 변경
화면 내 이동
spring (bouncy)
재미있는 인터랙션
알림, 버튼 피드백
인터랙티브 데모
애니메이션할 속성
✅
성능이 좋은 속성
- transform (translate, scale, rotate)
- opacity
- GPU 가속 사용
- 60fps 유지 가능
- 부드러운 애니메이션
❌
피해야 할 속성
- width, height
- margin, padding
- top, left, right, bottom
- 레이아웃 재계산 발생
- 성능 저하 가능
스태거(Stagger) 시퀀스
여러 항목을 순차적으로 애니메이션할 때의 딜레이 간격
항목 1
0ms
항목 2
50ms
항목 3
100ms
항목 4
150ms
리스트 항목: 30-50ms 간격 |
그리드 항목: 50-100ms 간격 |
최대 총 시간: 400-600ms
접근성 고려사항
prefers-reduced-motion:
• 사용자가 애니메이션 감소를 선호하는 경우
• 트랜지션을 즉각적으로 또는 최소화
• 필수적인 애니메이션만 유지
• 전정 장애가 있는 사용자 배려
85. 애니메이션 트랜지션 타이밍
Design animation timing guidelines:
**Duration Guidelines**:
**Micro-interactions** (50-150ms):
- Button hover states
- Checkbox toggle
- Icon color change
- Opacity changes
**Small Elements** (150-300ms):
- Dropdowns opening
- Tooltips appearing
- Card hovers
- Menu items
**Medium Elements** (300-500ms):
- Modal open/close
- Sidebar expand
- Page section reveals
- Card flip
**Large Elements** (400-700ms):
- Page transitions
- Full-screen overlays
- Complex sequences
- Route changes
**Easing Functions**:
**ease-out** (deceleration):
- Elements entering view
- Dropdown opens
- Modals appearing
- "Coming from off-screen"
**ease-in** (acceleration):
- Elements leaving view
- Dropdown closes
- Modals dismissing
- "Going off-screen"
**ease-in-out** (smooth):
- Position changes
- Size changes
- On-screen movements
- State transitions
**spring** (bouncy):
- Playful interactions
- Notifications arriving
- Button feedback
- Delight moments
**Stagger Sequences**:
- List items: 30-50ms delay each
- Grid items: 50-100ms delay
- Maximum total: 400-600ms
- Enter from same direction
**Concurrent Animations**:
- Fade + scale simultaneously
- Position + opacity
- Orchestrated sequences
**Properties to Animate** (performant):
- transform (translate, scale, rotate)
- opacity
- Avoid: width, height, margin, padding
**Reduced Motion**:
- Respect prefers-reduced-motion
- Instant transitions or minimal
- Essential motion only
**Animation Tokens**:
- duration-fast: 150ms
- duration-normal: 300ms
- duration-slow: 500ms
- ease-bounce: cubic-bezier(...)
Tech: Timing chart → Framer Motion / CSS transitions섹션 7: 컴포넌트 라이브러리 구축 (86-95)