Easing and duration tokens for your transitions and animations.
-out for entering, -in for leaving, -in-out for moving on screen, -linear for continuous motion.
--wr-ease-linear--wr-ease-out--wr-ease-in--wr-ease-in-out--wr-ease-spring| Token | Value | Use |
|---|---|---|
--wr-ease-linear | linear | Progress bars, spinners, marquees |
--wr-ease-out | cubic-bezier(0.16, 1, 0.3, 1) | Entering |
--wr-ease-in | cubic-bezier(0.7, 0, 0.84, 0) | Leaving |
--wr-ease-in-out | cubic-bezier(0.65, 0, 0.35, 1) | Moving between two states |
--wr-ease-spring | cubic-bezier(0.34, 1.56, 0.64, 1) | Overshoot. Use sparingly |
The farther something moves, the longer it may take.
| Token | Value | Use |
|---|---|---|
--wr-duration-fast | 0.1s | Hover and focus feedback |
--wr-duration-base | 0.15s | State changes: pressed, checked, selected |
--wr-duration-slow | 0.3s | Travel: a drawer, an expanding panel |
--wr-duration-slower | 0.5s | Full-screen motion |
A duration and an easing in one token. You name the property.
| Token | Value |
|---|---|
--wr-transition-short | var(--wr-duration-fast) var(--wr-ease-out) |
--wr-transition-base | var(--wr-duration-base) var(--wr-ease-linear) |
--wr-transition-long | var(--wr-duration-slow) var(--wr-ease-out) |
Dropdown, popover, tooltip, context menu and popconfirm read these; dialog, drawer and toast do not.
| Token | Value |
|---|---|
--wr-overlay-duration | var(--wr-duration-base) |
--wr-overlay-ease | var(--wr-ease-out) |
.my-control {
transition: background-color var(--wr-transition-base);
}
.my-drawer {
transition: transform var(--wr-duration-slow) var(--wr-ease-out);
}
// Retune everything that reads the tokens
:root {
--wr-duration-base: 0.08s;
--wr-overlay-ease: var(--wr-ease-spring);
}The theme stops overlay enter animations; zero the durations to stop transitions too.
@media (prefers-reduced-motion: reduce) {
:root {
--wr-duration-fast: 0.01ms;
--wr-duration-base: 0.01ms;
--wr-duration-slow: 0.01ms;
--wr-duration-slower: 0.01ms;
--wr-overlay-duration: 0.01ms;
}
}The theme's own reduced-motion rules are !important, so an override of them has to be too.