SPIDesign System

Animation

SPI 디자인 시스템의 모션(Motion) 토큰과 애니메이션 프리셋 가이드입니다.

Animation

Motion Tokens

Duration

duration.fast
100ms
Hover Me
버튼 호버 색상 전환, 포커스 링 표시 등 즉각적인 반응
duration.base
200ms
Hover Me
아코디언, 드롭다운 메뉴 열림, 탭 전환 등의 기본 애니메이션
duration.slow
400ms
Hover Me
모달 등 화면상의 큰 면적 진입/퇴장, 전체 컨텍스트 변경

Easing

토큰Cubic Bezier설명
easing.standardcubic-bezier(0.2, 0, 0, 1)일반 전환 (Material 3 standard)

Animation Presets

자주 사용되는 애니메이션 프리셋입니다. 카드 우측 상단의 재생 버튼을 눌러 실제 동작을 확인할 수 있습니다.

Fade In

투명 → 불투명 요소 등장

Fade In
animate-fade-in

Fade Out

불투명 → 투명 요소 퇴장

Fade Out
animate-fade-out

Slide In (Up)

아래에서 위로 슬라이드 등장

Slide In (Up)
animate-slide-in-up

Slide In (Down)

위에서 아래로 슬라이드 등장

Slide In (Down)
animate-slide-in-down

Slide Out (Up)

위로 슬라이드하며 퇴장

Slide Out (Up)
animate-slide-out-up

Slide Out (Down)

아래로 슬라이드하며 퇴장

Slide Out (Down)
animate-slide-out-down

Scale In

작게 → 원래 크기로 확대 (모달 등장)

Scale In
animate-scale-in

Scale Out

원래 크기 → 작게 축소 (모달 퇴장)

Scale Out
animate-scale-out

Elevation

SPI 디자인 시스템의 그림자(Shadow) 토큰 가이드입니다.

Dark Mode

SPI 디자인 시스템의 다크 모드 구현 및 사용 가이드입니다.

On this page

AnimationMotion TokensDurationEasingAnimation Presets