Easing curves cheat sheet, animated
Five dots race the same distance in the same time. Only the easing is different, and you can see it.
Cheat sheet
Easing curves, side by side
Linear
Ease in
Ease out
Ease in out
Spring
Sundry Millsundrymill.com/library
The five curves
-
Linear
Only for things that never stop: spinners, marquees, progress.
-
Ease in
Things leaving the screen. Slow start, fast exit.
-
Ease out
Things arriving: menus, toasts, cards. The one to use most.
-
Ease in out
Things moving from one place to another on screen.
-
Spring
Playful arrivals that overshoot and settle. Toggles, likes, pop ups.
All of them as variables
CSS
:root {
--ease-in: cubic-bezier(.32, 0, .67, 0);
--ease-out: cubic-bezier(.33, 1, .68, 1);
--ease-in-out: cubic-bezier(.65, 0, .35, 1);
--spring: linear(0, 0.046, 0.161, 0.315, 0.484, 0.648, 0.795, 0.917, 1.01, 1.075, 1.115, 1.133, 1.134, 1.124, 1.105, 1.083, 1.06, 1.039, 1.02, 1.005, 0.994, 0.987, 0.983, 0.982, 0.982, 0.984, 0.987, 0.99, 0.993, 0.996, 0.998, 1, 1.001, 1.002, 1.002, 1.002, 1.002, 1.002, 1.002, 1.001, 1);
}
.menu { transition: transform 250ms var(--ease-out); }How to use it
- Ease out is the workhorse: fast at the start, gentle at the end. Use it for anything that appears or opens.
- Ease in is for exits. Things that speed up as they leave feel like they are getting out of the way.
- The spring is a CSS linear() list sampled from a real spring (stiffness 170, damping 14). It works in every current browser.
- Keep UI animations between 150 and 400 ms. The race here is slower so you can see the shapes.
Free to use in personal and commercial work. No credit needed, though a link back is always nice.
