7onicDESIGN SYSTEM

Animation

컴포넌트의 등장/퇴장 효과를 통일하는 애니메이션 토큰입니다. 모두 Named 타입으로, 토큰 이름이 그대로 클래스 이름(animate-{name})에 1:1 매핑됩니다.

Enter Animations

Checkbox, Radio의 등장 효과. 각 토큰이 하나의 클래스(animate-checkbox-enter)에 1:1 매핑됩니다.

opacity 0·scale 0.75→1
checkbox-enterCheckbox

체크마크 등장 애니메이션

opacity 0
+
scale 0.75 (75%)
+
duration micro (150ms)
+
easing ease-out
Tailwindanimate-checkbox-enter
opacity 0·scale 0.5→1
radio-enterRadio

라디오 도트 등장 애니메이션

opacity 0
+
scale 0.50 (50%)
+
duration micro (150ms)
+
easing ease-out
Tailwindanimate-radio-enter

Scale Comparison

컴포넌트 형태에 맞는 스케일 값 사용 가이드

시작 스케일
75%

Checkbox

체크마크가 영역 안에 맞게 75% 스케일에서 자연스럽게 등장합니다.

animate-checkbox-enter
시작 스케일
50%

Radio

50% 스케일에서 시작해 '팝' 효과로 인상적인 등장감을 연출합니다.

animate-radio-enter

Named Animations

각 컴포넌트 고유의 독립 애니메이션. animate-* 클래스 하나로 완결됩니다.

Modal

2 enter/exit pairs

Enternormal (200ms)
animate-modal-overlay-enter

오버레이 페이드 인

Exitfast (100ms)
animate-modal-overlay-exit

오버레이 페이드 아웃

Enternormal (200ms)
animate-modal-content-enter

콘텐츠 등장 (opacity + scale + translateY)

Exitfast (100ms)
animate-modal-content-exit

콘텐츠 퇴장

NavigationMenu

3 enter/exit pairs

Enternormal (200ms)
animate-fade-in

페이드 인

Exitnormal (200ms)
animate-fade-out

페이드 아웃

Entermicro (150ms)
animate-nav-viewport-enter

뷰포트 등장 (opacity + scale + translateY)

Exitfast (100ms)
animate-nav-viewport-exit

뷰포트 퇴장

Enternormal (200ms)
animate-collapsible-down

콜랩시블 펼치기 (height)

Exitnormal (200ms)
animate-collapsible-up

콜랩시블 접기 (height)

Accordion

1 enter/exit pair

Enternormal (200ms)
animate-accordion-down

아코디언 펼치기 (height)

Exitnormal (200ms)
animate-accordion-up

아코디언 접기 (height)

Drawer

화면 끝에서 슬라이드 인/아웃

→
right
←
left
↑
top
↓
bottom
Enter
slow (300ms)
animate-drawer-*-enter
Exit
normal (200ms)
animate-drawer-*-exit

Tooltip

툴팁 등장/퇴장 (opacity + translate 4px)

↑
top
↓
bottom
→
right
←
left
Enter
micro (150ms)
animate-tooltip-*-enter
Exit
fast (100ms)
animate-tooltip-*-exit

Popover

팝오버 등장/퇴장 (opacity + translate 4px)

↑
top
↓
bottom
→
right
←
left
Enter
normal (200ms)
animate-popover-*-enter
Exit
fast (100ms)
animate-popover-*-exit

Toast

토스트 슬라이드 인/아웃

→
right
←
left
↑
top
↓
bottom
Enter
slow (300ms)
animate-toast-slide-*-in
Exit
normal (200ms)
animate-toast-slide-*-out

Global

무한 회전 (로딩 스피너)

animate-spin

무한 회전 (로딩 스피너)

spin (1000ms)

Progress

스트라이프 흐름 애니메이션 (background-position)

animate-progress-stripe

스트라이프 흐름 애니메이션 (background-position)

spin (1000ms)

Spinner

3D Y축 회전 (rotateY 0→360deg), 도트 투명도 펄스 (opacity 0.2→1→0.2), 바 스케일 펄스 (scaleY 0.4→1→0.4), 유기적 형태 변형 + 3D 회전 (border-radius morph)

animate-spinner-orbit

3D Y축 회전 (rotateY 0→360deg)

spin (1000ms)
animate-spinner-dot

도트 투명도 펄스 (opacity 0.2→1→0.2)

spin (1000ms)
animate-spinner-bar

바 스케일 펄스 (scaleY 0.4→1→0.4)

spin (1000ms)
animate-spinner-morph

유기적 형태 변형 + 3D 회전 (border-radius morph)

spin (1000ms)

Skeleton

밝기 펄스 (opacity 1→0.4→1), 시머 그라디언트 스윕 (translateX -100%→100%)

animate-skeleton-pulse

밝기 펄스 (opacity 1→0.4→1)

spin (1000ms)
animate-skeleton-wave

시머 그라디언트 스윕 (translateX -100%→100%)

spin (1000ms)

Best Practices

✓

권장

  • ✓짧은 duration(micro=150ms)으로 빠른 피드백 제공
  • ✓ease-out으로 자연스러운 감속감 연출
  • ✓opacity + scale 조합으로 풍부한 트랜지션 구현
  • ✓named 클래스로 1:1 매핑 유지
✕

지양

  • ✗300ms+ 마이크로 인터랙션
  • ✗등장 애니메이션에 ease-in 사용
  • ✗keyframes 하드코딩
  • ✗prefers-reduced-motion 무시