Easing function previewer
Select easing functions, press play, and watch boxes animate across a track at the same duration. Compare translate, opacity, and scale previews.
~~~
Playback
Built-in
Presets
Custom cubic-bezier
Animation track
~~~
Curves
CSS also supports linear() for multi-stop linear easing (not plotted here). Use it when you need several constant-speed segments in one timing function.
~~~
About this tool
Easing controls how fast a transition or animation accelerates and decelerates. Comparing curves side by side helps you pick the right feel — snappy UI feedback, smooth page motion, or a playful overshoot.
Everything runs in your browser. Selected easings and custom bezier values are saved in the URL.
~~~