All tools

CSS Easing Curves

Visualize easing functions and copy CSS.

800 ms
CSS
transition: all 800ms cubic-bezier(0.4, 0.0, 0.2, 1);

Easing curves shape how an animation accelerates and decelerates. Linear feels mechanical; ease-out feels natural for entrances. Material Design uses standard curves for consistency. The bouncy curve overshoots, useful for playful feedback.

About

Pick an easing function (built-in or curated cubic-bezier). The tool plays an animation so you can feel the difference. Includes Material Design and iOS standard curves.

How to use

  1. Pick an easing.
  2. Hit animate.

FAQ

When to use ease-out?+

Most UI motion. Things should slow down as they arrive (entrances, hovers). Ease-in feels unnatural for most cases - it's mostly used for exits.