← Back to Motion & Animation

Timing functions control the acceleration curve of animations, making them feel natural and engaging. Choose the right timing function to match your animation's purpose and context.

linear

Constant speed throughout the animation

Loading bars, continuous rotations

linear
DEMO1s duration

ease

Slow start, fast middle, slow end (default)

General purpose animations

ease
DEMO1s duration

ease-in

Slow start, accelerates to the end

Elements entering the scene

ease-in
DEMO1s duration

ease-out

Fast start, decelerates to the end

Elements leaving the scene

ease-out
DEMO1s duration

ease-in-out

Slow start and end, fast middle

Smooth transitions, state changes

ease-in-out
DEMO1s duration

bounce

Playful bounce effect

Button clicks, success feedback

cubic-bezier(0.68, -0.55, 0.265, 1.55)
DEMO1s duration

elastic

Elastic spring motion

Modal entrances, drawer openings

cubic-bezier(0.175, 0.885, 0.32, 1.275)
DEMO1s duration

back

Slight overshoot at the end

Card flips, reveals

cubic-bezier(0.68, -0.6, 0.32, 1.6)
DEMO1s duration

Best Practices

  • • Use ease-out for elements entering
  • • Use ease-in for elements leaving
  • • Use ease-in-out for state changes
  • • Use linear for loading indicators
  • • Test on slower devices to ensure smooth performance

Accessibility

  • • Respect prefers-reduced-motion
  • • Avoid bouncy effects for critical interactions
  • • Keep animations under 500ms for UI feedback
  • • Provide alternatives for motion-sensitive users