The easing curves cheat sheet (code, not theory)

I have written about easing that looks like money at length. That piece is about taste; this one is about reference. Twelve curves, side by side, with the numbers worth typing into a CSS file. Bookmark it.

The twelve

Linear

linear

The dot moves at constant velocity. Useful for: backgrounds, scroll progress, anything where motion is communication rather than performance. Avoid for: literally any other entrance or exit.

Ease

ease /* cubic-bezier(.25, .1, .25, 1) */

The CSS default. Symmetric in-out. Used everywhere by default; opinion-free, slightly cinematic. Replace it with something tuned for the moment.

Settle (a.k.a. expo-out variants)

cubic-bezier(.16, 1, .3, 1)

My single most-used curve. Cinematic ease-out: rushes in, settles slowly. Pair with 600-900ms duration for editorial motion.

Ease-in

cubic-bezier(.42, 0, 1, 1)

Slow start, fast finish. Reads as "falling" or "departing." Use for exits, not entrances.

Ease-out

cubic-bezier(0, 0, .58, 1)

Fast start, slow finish. The most common useful curve in practice — softer than settle, more energetic than ease.

Ease-in-out

cubic-bezier(.42, 0, .58, 1)

Symmetric. Slow on both ends. Used heavily; often slightly mechanical-feeling. A biased in-out (longer tail than ramp) usually feels better — try cubic-bezier(.65, 0, .35, 1).

Back

cubic-bezier(.34, 1.56, .64, 1)

The "overshoot" curve. The element arrives, goes past, snaps back. The 1.56 is the overshoot amount; lower for subtle, higher for cartoonish.

Bounce

// CSS does not have a bounce easing, but you can fake it with multiple keyframes
@keyframes bounce {
  0% { transform: translateY(-300px); }
  60% { transform: translateY(0); }
  75% { transform: translateY(-30px); }
  100% { transform: translateY(0); }
}

Multiple bounces of decaying amplitude. Used in playful contexts; rarely the right call for a corporate brand.

Elastic

// Not a cubic-bezier — needs a keyframe or JS
function elastic(t) {
  const c = (2 * Math.PI) / 3;
  return t === 0 ? 0 : t === 1 ? 1 : Math.pow(2, -10 * t) * Math.sin((t * 10 - 0.75) * c) + 1;
}

A spring with many oscillations. Reads as "rubber band." Use with extreme caution — looks like an animation library demo.

Expo-out

cubic-bezier(.19, 1, .22, 1)

More aggressive than settle. The element snaps in and rests immediately. Pair with shorter durations (400-600ms).

Circ-out

cubic-bezier(0, .55, .45, 1)

A constant-rate-of-acceleration feel. Reads as smoother than ease-out at small distances. Good for hovers, button feedback.

Quint-out

cubic-bezier(.22, 1, .36, 1)

Between settle and expo-out. Slightly more rest at the end. Good middle ground for "make this feel cinematic without committing to a long tail."

The chart

A comparison everybody finds clarifying — every curve plotted on the same axes. The exercise is to watch it once, then close it and pick the three you will use this quarter.

How to actually use this

The honest advice for picking from twelve options: do not. Pick three.

1. One for entrances. Probably cubic-bezier(.16, 1, .3, 1) (settle).
2. One for exits. Probably cubic-bezier(.7, 0, .84, 0) (ease-in-quad-ish).
3. One for hero moments. Probably cubic-bezier(.34, 1.56, .64, 1) (back).

Use those three on everything. Reserve the other nine for "I am making a deliberate exception today." The reason elite motion design feels consistent is that elite motion designers picked their three and stopped.

The easing-that-looks-like-money post has the longer version of this argument with the six curves I actually use across my own work.

Bookmark this

If you maintain a design system, paste the cubic-bezier values into a tokens.css:

:root {
  --ease-settle: cubic-bezier(.16, 1, .3, 1);
  --ease-exit: cubic-bezier(.7, 0, .84, 0);
  --ease-back: cubic-bezier(.34, 1.56, .64, 1);
  --ease-standard: cubic-bezier(.65, 0, .35, 1);
}

Then every transition in your codebase reads var(--ease-settle). When you tune one curve, every component using it updates. Same play easing-as-tokens covers in detail.

A reference, not a recipe

A cheatsheet is for occasional consultation, not a daily-driver decision tool. If you find yourself opening this list every time you write a transition, you have not internalized enough of them. Pick the three. Use them. The cheatsheet exists for the day you need a fourth.