Easing cheatsheet

All 16 named curves with their exact values and the job each one is for. Click any preview to replay it. Every value here ships as a custom property in tokens.css.

Easing	Exact value	Use it for
Basics
linear	`linear`	Progress bars, marquees, color/opacity fades where constancy is the point. Never for movement.
Ease-out — entrances
ease-out-quad	`cubic-bezier(0.5, 1, 0.89, 1)`	Gentlest deceleration. Subtle hovers and small shifts.
ease-out-cubic	`cubic-bezier(0.33, 1, 0.68, 1)`	The workhorse. Entrances, dropdowns, toasts. Default when in doubt.
ease-out-quart	`cubic-bezier(0.25, 1, 0.5, 1)`	More dramatic settle. Modals, sheets, larger surfaces.
ease-out-expo	`cubic-bezier(0.16, 1, 0.3, 1)`	Near-instant start, long settle. Hero reveals; keeps long durations snappy.
circ-out	`cubic-bezier(0, 0.55, 0.45, 1)`	Max velocity at start, settles earlier than expo. Punchy micro-interactions.
Ease-in-out — moves
ease-in-out-cubic	`cubic-bezier(0.65, 0, 0.35, 1)`	A-to-B moves of on-screen elements: reordering, tab indicators.
ease-in-out-quart	`cubic-bezier(0.76, 0, 0.24, 1)`	Stronger launch-and-land. Carousels, large positional swaps.
ease-in-out-expo	`cubic-bezier(0.87, 0, 0.13, 1)`	Almost a hard cut with cushioned ends. Full-screen transitions.
Ease-in — exits only
ease-in-cubic	`cubic-bezier(0.32, 0, 0.67, 0)`	Feels laggy on entrances. Only for exits — element accelerates away. Keep it short.
Overshoot & anticipation — personality
back-out	`cubic-bezier(0.34, 1.56, 0.64, 1)`	Overshoots ~10% and returns. Playful popovers, FABs, badges. One per view.
back-in-out	`cubic-bezier(0.68, -0.6, 0.32, 1.6)`	Winds up, then overshoots on arrival. Attention-grabbing swaps; use sparingly.
anticipate	`cubic-bezier(0.55, -0.35, 0.25, 1)`	Pulls back ~6% before launching. Telegraphs a jump before it happens.
Springs — via linear()
spring-soft	`linear(0, 0.028, 0.097, 0.191, 0.298, 0.408, 0.514, 0.612, 0.7, 0.776, 0.839, 0.891, 0.933, 0.965, 0.989, 1.006, 1.017, 1.024, 1.027, 1.028, 1.028, 1.026, 1.023, 1.02, 1.017, 1.014, 1.011, 1.009, 1.006, 1.005, 1.003, 1.002, 1)`	Barely 3% overshoot. Sheets and cards that should feel physical but calm.
spring-snappy	`linear(0, 0.047, 0.162, 0.311, 0.472, 0.624, 0.759, 0.87, 0.955, 1.016, 1.055, 1.076, 1.083, 1.081, 1.072, 1.06, 1.047, 1.034, 1.022, 1.013, 1.005, 1, 0.996, 0.994, 0.993, 0.993, 0.994, 0.995, 0.996, 0.997, 0.998, 0.999, 1)`	Fast attack, ~8% overshoot, quick settle. Buttons, toggles, chips.
spring-bouncy	`linear(0, 0.197, 0.62, 1.031, 1.285, 1.344, 1.255, 1.104, 0.969, 0.893, 0.884, 0.92, 0.973, 1.017, 1.039, 1.039, 1.024, 1.006, 0.992, 0.986, 0.987, 0.993, 0.999, 1.003, 1.005, 1.004, 1.002, 1, 0.999, 0.998, 0.999, 0.999, 1)`	Full double bounce (~34% overshoot). Celebratory moments only.

Your browser does not support CSS linear() — the three spring rows will animate with the default easing instead.

Notes

linear() needs Chrome/Edge 113+, Firefox 112+ or Safari 17.2+. On older engines, declare a bezier fallback on the previous line (last supported declaration wins). The spring values were sampled from the underdamped spring solution — parameters and the full token set live in tokens.css; play with every curve in the interactive playground.