Motion

Duration

--duration-fast

0.15s · hover / focus / color

--duration-base

0.2s · transform / 아이콘 회전

--duration-slow

0.3s · 모달 / 패널 슬라이드

Easing

--easing-default

ease · 시스템 기본값

Easing 함수 비교 — 0.6s 동일 시간, 가속도 차이

ease

시스템 기본값

ease-in

느리게 시작

ease-out

느리게 끝남

ease-in-out

양쪽 모두 느림

linear

일정한 속도

Live Demo — Duration 비교

--duration-fast

0.15s · hover / focus

--duration-base

0.2s · transform

--duration-slow

0.3s · 모달 / 패널

Usage Guidelines

토큰 값 사용 상황 컴포넌트 예시
fast 0.15s 색상 전환, 배경색, 테두리, 그림자, opacity처럼 시각적 피드백이 즉각적이어야 하는 요소. 느끼기엔 거의 즉시지만 딱딱하지 않음. Button hover, Input focus ring, Link color, Checkbox fill
base 0.2s 위치나 형태가 바뀌는 요소. 움직임이 인지되어야 하지만 기다리는 느낌은 없어야 함. Accordion 펼치기, 아이콘 회전, Tooltip 나타남, Dropdown 열림
slow 0.3s 큰 레이아웃 변화. 화면에 새 레이어가 올라오거나 패널이 슬라이드되는 등 사용자의 시선을 유도할 때. Modal 등장/사라짐, Side Panel 슬라이드, Toast 알림
easing ease 모든 transition의 기본값. 처음에 빠르고 끝에서 부드럽게 멈추는 자연스러운 곡선. 특별한 이유가 없으면 항상 이 값을 사용. 시스템 전체 기본값

⚠️ 주의 사항

  • 0.5s 이상은 사용하지 않는다. 사용자가 UI가 느리다고 느끼기 시작하는 임계점이다.
  • 중요하지 않은 요소에 animation을 추가하지 않는다. 모든 것이 움직이면 아무것도 강조되지 않는다.
  • prefers-reduced-motion을 고려한다. 전정 장애 등 움직임에 민감한 사용자를 위해 애니메이션을 축소하거나 비활성화한다.

prefers-reduced-motion 적용 예시

/* 기본 transition */
.my-element {
  transition: transform var(--duration-base) var(--easing-default);
}

/* 움직임 축소 설정 사용자 — transition 제거 */
@media (prefers-reduced-motion: reduce) {
  .my-element {
    transition: none;
  }
}

Tokens

--duration-fast

0.15s

--duration-base

0.2s

--duration-slow

0.3s

--easing-default

ease

토큰명을 클릭하면 복사됩니다.