Easings
Easing curves that don't look like the browser defaults.
Glide
Slows down gently and lands soft. The default choice for drawers, modals, and anything that expands.
glide
.element {
transition: transform 300ms var(--ease-glide);
}Snap
Leaves fast, overshoots a little, settles. Good for toggles and selections, where the response should feel immediate.
snap
.element {
transition: transform 300ms var(--ease-snap);
}Heavy
A big elastic overshoot. It draws the eye, which is exactly why one per screen is plenty.
heavy
.element {
transition: transform 300ms var(--ease-heavy);
}In
Starts slow, accelerates toward the end.
sine
quad
cubic
quart
quint
expo
circ
back
.element {
transition: transform 300ms var(--ease-in-sine);
transition: transform 300ms var(--ease-in-quad);
transition: transform 300ms var(--ease-in-cubic);
transition: transform 300ms var(--ease-in-quart);
transition: transform 300ms var(--ease-in-quint);
transition: transform 300ms var(--ease-in-expo);
transition: transform 300ms var(--ease-in-circ);
transition: transform 300ms var(--ease-in-back);
}Out
Starts fast, decelerates toward the end.
sine
quad
cubic
quart
quint
expo
circ
back
.element {
transition: transform 300ms var(--ease-out-sine);
transition: transform 300ms var(--ease-out-quad);
transition: transform 300ms var(--ease-out-cubic);
transition: transform 300ms var(--ease-out-quart);
transition: transform 300ms var(--ease-out-quint);
transition: transform 300ms var(--ease-out-expo);
transition: transform 300ms var(--ease-out-circ);
transition: transform 300ms var(--ease-out-back);
}In Out
Slow at both ends, fast in the middle.
sine
quad
cubic
quart
quint
expo
circ
back
.element {
transition: transform 300ms var(--ease-in-out-sine);
transition: transform 300ms var(--ease-in-out-quad);
transition: transform 300ms var(--ease-in-out-cubic);
transition: transform 300ms var(--ease-in-out-quart);
transition: transform 300ms var(--ease-in-out-quint);
transition: transform 300ms var(--ease-in-out-expo);
transition: transform 300ms var(--ease-in-out-circ);
transition: transform 300ms var(--ease-in-out-back);
}