Skip to content
Prompt Words
History

Easing

Also called: easing curve, timing function, ease-in, ease-out, ease-in-out.

How an animation speeds up and slows down over its duration. Ease-out, a fast start with a gentle stop, is the safe default for things appearing on screen.

Every ball takes the same 1.2 seconds. Only the easing is different.

ease-out 0s
ease-out 0.3s
ease-out 0.6s
ease-out 1.2s
Start

Say it in a prompt

Use ease-out, cubic-bezier(0.16, 1, 0.3, 1), at 300ms for elements entering the screen, and ease-in at 200ms for elements leaving.

Seen on

  • Stripe: Content in the product dialog rises and fades in over 0.75s on a curve that starts fast and settles slowly.
  • Linear: The site's CSS names its motion curves (ease-out-quad, ease-in-out-cubic, ease-out-expo) and reuses them everywhere.

You might describe it as

  • animation that starts fast and slows down at the end
  • movement feels robotic and not smooth
  • speed curve of the motion

Not to be confused with

  • Spring

    Easing is the whole family of speed curves; spring is the one that overshoots and settles.

  • Stagger

    Easing shapes one item's speed; stagger sets the delay between several items.