Easings
Custom easing curves for natural-feeling transitions and animations.
Glide
Smooth deceleration with a soft landing. Works well for most UI transitions — drawers, modals, expanding content.
glide
.element {
transition: transform 300ms var(--ease-glide);
}Snap
Fast out with a slight overshoot that snaps into place. Great for elements that should feel responsive and decisive — toggles, selections.
snap
.element {
transition: transform 300ms var(--ease-snap);
}Heavy
Dramatic elastic overshoot for elements that need weight and impact. Use sparingly for things that should demand attention.
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);
}