transition-timing-function
Controls transition speed curve. tfe (ease) is default, providing natural easing.
Class List
| Class | CSS | Description |
|---|---|---|
tfe | transition-timing-function: ease | Slow start → fast → slow end (default) |
tfei | transition-timing-function: ease-in | Slow start → gradually faster |
tfeo | transition-timing-function: ease-out | Fast start → gradually slower |
tfeio | transition-timing-function: ease-in-out | Slow start → fast → slow end (symmetrical) |
tfl | transition-timing-function: linear | Constant speed |
tfss | transition-timing-function: step-start | Instant transition at start |
tfse | transition-timing-function: step-end | Instant transition at end |
Visual Comparison
Compares timing function speed curves. Hover to see animation.
ease (default value) — tfe
Slowly starts, accelerates, decelerates at end. Most natural for UI.
ease-in — tfei
Starts slow, gradually faster. For elements exiting screen.
ease-out — tfeo
Starts fast, gradually slower. For elements entering screen.
ease-in-out — tfeio
Symmetrical slow start/end. Similar to ease but more uniform.
linear — tfl
Constant speed. For progress bars, rotation.
step-start — tfss
Jumps to final state at start.
step-end — tfse
Jumps to final state at end.
Usage Examples
<!-- ease (default, most natural) -->
<button class="tall200msease hover-bg6366F1 cFFFFFF">
Default ease transition
</button>
<!-- ease-out (entering elements) -->
<div class="tall300ms tfeo hover-ttx10px">
Moves smoothly on hover
</div>
<!-- linear (progress bar) -->
<div class="tfl tall1000ms w0 hover-w100p bg6366F1 h4px br4px">
</div>Tips & Notes
ease is optimal in most situations
tfe (ease): slow start → fast → slow end. Keep default unless specific reason.
linear for progress bars
tfl (linear) constant speed, for progress bars/timers.
Step functions for frame animations
tfss (step-start), tfse (step-end) for sprite sheet animations.