CSS Animation Timing Functions

Constant speed from start to end. No acceleration or deceleration.

Use case: Progress bars, loading indicators, continuous animations

Default CSS easing. Slow start, fast middle, slow end.

Use case: General-purpose UI transitions

Slow start, fast end. Element accelerates into motion.

Use case: Elements leaving the screen, exit animations

Fast start, slow end. Element decelerates to rest.

Use case: Elements entering the screen, modal open, drop-ins

Slow start, fast middle, slow end. Smooth symmetric easing.

Use case: Sliding panels, carousels, smooth state changes

Instant jump at the start of the interval.

Use case: Instant state switches, sprite animations

Instant jump at the end of the interval. Same as step-end.

Use case: Delayed state switches, typing cursor blink

Shorthand for steps(1, start). Jumps to end value immediately.

Use case: Immediate state changes without interpolation

Shorthand for steps(1, end). Stays at start value until end.

Use case: Delayed jumps, typing cursor animations

Standard easing for elements that move within the viewport.

Use case: Navigation, container transforms, dialog open/close

Emphasized easing with dramatic deceleration for important transitions.

Use case: Hero animations, FAB transformations

Elements entering screen decelerate to rest.

Use case: Cards entering view, modals opening, sheets sliding up

Elements leaving screen accelerate off screen.

Use case: Cards exiting, sheets sliding down, dismissals

Default transition easing in Tailwind CSS (ease-in-out variant).

Use case: General Tailwind transitions

Ease-in variant used in Tailwind utilities.

Use case: Elements accelerating off screen

Ease-out variant used in Tailwind utilities.

Use case: Elements decelerating into position

Sinusoidal ease-in curve. Gentle start acceleration.

Use case: Subtle enter animations

Sinusoidal ease-out curve. Gentle end deceleration.

Use case: Subtle exit animations

Sinusoidal ease-in-out. Natural, smooth symmetric easing.

Use case: Natural-feeling UI transitions

Quartic ease-in. Sharp initial acceleration.

Use case: Dramatic exit animations, attention-grabbing motion

Overshoots target then settles. Creates a bouncy feel.

Use case: Playful UI elements, notification pop-ins