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.
The --ease-glide-* variables pair glide with a set
duration. Put the property in front.
| Property | Value |
|---|---|
--ease-glide-1 |
100ms var(--ease-glide) |
--ease-glide-2 |
150ms var(--ease-glide) |
--ease-glide-3 |
200ms var(--ease-glide) |
--ease-glide-4 |
300ms var(--ease-glide) |
--ease-glide-5 |
400ms var(--ease-glide) |
glide-1
glide-2
glide-3
glide-4
glide-5
.element {
transition: opacity var(--ease-glide-3);
}
/* several properties */
.element {
transition:
opacity var(--ease-glide-3),
translate var(--ease-glide-4);
}
/* your own duration */
.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.
The --ease-snap-* variables pair snap with a set
duration. Put the property in front.
| Property | Value |
|---|---|
--ease-snap-1 |
400ms var(--ease-snap) |
--ease-snap-2 |
550ms var(--ease-snap) |
--ease-snap-3 |
750ms var(--ease-snap) |
--ease-snap-4 |
1000ms var(--ease-snap) |
--ease-snap-5 |
1300ms var(--ease-snap) |
snap-1
snap-2
snap-3
snap-4
snap-5
.element {
transition: opacity var(--ease-snap-3);
}
/* several properties */
.element {
transition:
opacity var(--ease-snap-3),
translate var(--ease-snap-4);
}
/* your own duration */
.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.
The --ease-heavy-* variables pair heavy with a set
duration. Put the property in front.
| Property | Value |
|---|---|
--ease-heavy-1 |
600ms var(--ease-heavy) |
--ease-heavy-2 |
700ms var(--ease-heavy) |
--ease-heavy-3 |
850ms var(--ease-heavy) |
--ease-heavy-4 |
1000ms var(--ease-heavy) |
--ease-heavy-5 |
1200ms var(--ease-heavy) |
heavy-1
heavy-2
heavy-3
heavy-4
heavy-5
.element {
transition: opacity var(--ease-heavy-3);
}
/* several properties */
.element {
transition:
opacity var(--ease-heavy-3),
translate var(--ease-heavy-4);
}
/* your own duration */
.element {
transition: transform 300ms var(--ease-heavy);
}Standard Curves
The classic curves, from gentle (sine) to strong (expo), in three directions. In starts slow and speeds up. Out starts fast and slows down. In out is slow at both ends.
| In | Out | In out |
|---|---|---|
--ease-in-sine |
--ease-out-sine |
--ease-in-out-sine |
--ease-in-quad |
--ease-out-quad |
--ease-in-out-quad |
--ease-in-cubic |
--ease-out-cubic |
--ease-in-out-cubic |
--ease-in-quart |
--ease-out-quart |
--ease-in-out-quart |
--ease-in-quint |
--ease-out-quint |
--ease-in-out-quint |
--ease-in-expo |
--ease-out-expo |
--ease-in-out-expo |
--ease-in-circ |
--ease-out-circ |
--ease-in-out-circ |
--ease-in-back |
--ease-out-back |
--ease-in-out-back |