모션

짧고 절제된 전환만. 의도(상태 변화)를 거들 뿐, 주목을 끌지 않는다: Tailwind transition을 그대로 쓴다.

살아있는 예시 · hover · 탭 해보기

transition-colors · 200ms

transition-transform · scale

›

transition-transform · rotate

transition-colors

색 전환: hover·focus. 가장 흔함(버튼·링크·인풋).

transition-transform

이동·회전·확대: 토글 화살표·살짝 커지는 카드.

transition

기본 묶음(색·그림자·투명도·transform 등 자주 쓰는 속성).

transition-none

전환 끔: 즉시 반영해야 할 때.

transition-all은 피한다: 의도치 않은 속성까지 전환돼 성능·버그를 부른다. 필요한 속성만 지정.

duration-150

150ms

빠름: 색·작은 hover. 즉각적인 느낌.

duration-200

200ms

기본: 대부분의 인터랙션.

duration-300

300ms

느림: 패널 열림 등 큰 이동.

ease-out

빠르게 시작→천천히 멈춤. 등장(나타날 때)에 권장: 가장 자연스럽다.

ease-in

천천히 시작→빠르게. 퇴장(사라질 때)에.

ease-in-out

양끝 부드럽게. 이동·상태 전환.