transition-timing-function
트랜지션의 속도 곡선을 제어합니다. tfe(ease)가 기본값이며, 자연스러운 가감속을 제공하여 대부분의 상황에서 권장됩니다.
클래스 목록
| 클래스 | CSS | 설명 |
|---|---|---|
tfe | transition-timing-function: ease | 느리게 시작 → 빠르게 → 느리게 끝남 (기본값) |
tfei | transition-timing-function: ease-in | 느리게 시작 → 점점 빨라짐 |
tfeo | transition-timing-function: ease-out | 빠르게 시작 → 점점 느려짐 |
tfeio | transition-timing-function: ease-in-out | 느리게 시작 → 빠르게 → 느리게 끝남 (대칭) |
tfl | transition-timing-function: linear | 일정한 속도로 진행 |
tfss | transition-timing-function: step-start | 시작 시점에 즉시 전환 |
tfse | transition-timing-function: step-end | 종료 시점에 즉시 전환 |
시각적 비교
각 타이밍 함수의 속도 곡선을 비교합니다. 호버하면 애니메이션이 적용됩니다.
ease (기본값) — tfe
천천히 시작하여 중간에 가속, 마지막에 다시 감속합니다. UI 인터랙션에 가장 자연스럽습니다.
ease-in — tfei
느리게 시작해서 점점 빨라집니다. 화면 밖으로 나가는 요소에 적합합니다.
ease-out — tfeo
빠르게 시작해서 점점 느려집니다. 화면 안으로 들어오는 요소에 적합합니다.
ease-in-out — tfeio
느리게 시작하고 느리게 끝나는 대칭 곡선입니다. ease와 비슷하지만 더 균일합니다.
linear — tfl
일정한 속도로 움직입니다. 프로그레스 바, 회전 등에 적합합니다.
step-start — tfss
시작과 동시에 최종 상태로 점프합니다.
step-end — tfse
종료 시점에 최종 상태로 점프합니다.
사용 예시
<!-- ease (기본, 가장 자연스러움) -->
<button class="tall200msease hover-bg6366F1 cFFFFFF">
기본 ease 트랜지션
</button>
<!-- ease-out (들어오는 요소) -->
<div class="tall300ms tfeo hover-ttx10px">
호버 시 부드럽게 이동
</div>
<!-- linear (프로그레스 바) -->
<div class="tfl tall1000ms w0 hover-w100p bg6366F1 h4px br4px">
</div>팁 & 주의사항
ease가 대부분의 상황에서 최적
tfe(ease)는 느리게 시작 → 빠르게 → 느리게 끝나는 자연스러운 곡선입니다. 특별한 이유가 없다면 기본값을 유지하세요.
linear는 진행 표시줄에 적합
tfl(linear)은 일정한 속도로 움직이므로 프로그레스 바나 타이머 등에 적합합니다.
step 함수는 프레임 애니메이션에 사용
tfss(step-start), tfse(step-end)는 스프라이트 시트 애니메이션 등 단계적 전환이 필요할 때 사용합니다.