Easing functions: ease-out, cubic-bezier, spring

The 5 keyword easings + the custom one

.linear     { transition-timing-function: linear; }       /* constant speed */
.ease       { transition-timing-function: ease; }         /* default — slow start + end */
.ease-in    { transition-timing-function: ease-in; }      /* slow start */
.ease-out   { transition-timing-function: ease-out; }     /* slow end */
.ease-in-out { transition-timing-function: ease-in-out; } /* slow both */
.custom     { transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); } /* overshoot */

Which to use when

• `ease-out` (default in 2026) — slows at the end. Best for INCOMING motion (elements appearing on screen). Feels natural.
• `ease-in` — slows at the start. For OUTGOING (elements leaving the screen).
• `ease-in-out` — slow both ends. For symmetric motion (modals, toggles).
• `linear` — constant speed. For continuous animation (rotating loaders, marquees).
• `cubic-bezier` — anything custom. The classic "overshoot" or "spring" curves.

The "spring" easing

cubic-bezier(0.34, 1.56, 0.64, 1) is the famous "overshoot" curve. The transformed value briefly goes BEYOND the target then settles. Feels playful.

Tools like cubic-bezier.com let you draw the curve and copy the values.

linear() (new 2024)

animation-timing-function: linear(0, 0.5 25%, 1);

Pass a sequence of stops. Replaces cubic-bezier for some uses; lets you do spring-like motion with multiple knees. Browser support shipped late 2023.