CSS easing curves

FAQ

Where do I put these values?

In the transition-timing-function or animation-timing-function property, or as the third slot of the transition shorthand, for example transition: transform .3s cubic-bezier(0.33, 1, 0.68, 1). The keyword items (ease, ease-in and friends) are built into every browser; the cubic-bezier() ones work everywhere cubic-bezier is supported, which is every modern browser.

How do I read the swatch?

The horizontal axis is time from start to finish, the vertical axis is how far the animated value has moved. A curve that starts shallow and ends steep (ease-in) begins slowly and accelerates; the opposite shape (ease-out) starts fast and settles. The two faint horizontal lines mark 0 and 1, so back curves visibly cross them when they overshoot.

When should I use an out curve versus an in curve?

For UI, ease-out variants are the usual default: interfaces feel responsive when movement starts fast and decelerates into place. Use ease-in variants mostly for elements leaving the screen, and in-out variants for movement that starts and ends on screen, like repositioning a card.

What happens with the negative values in the back curves?

Control points outside the 0 to 1 range make the animated value overshoot its start or end before settling, which reads as a small bounce. That is fine for transforms like translate and scale, but avoid it for properties that clamp, such as opacity, where the overshoot is simply cut off.