Transitions & Easing
Transition variables are used to provide consistent animation durations across your app. They control how long an animation takes to complete.
Example
.element {
transition: var(--dwc-transition-slow) background-color;
}
Variables
| Variable | Default Value | Example |
|---|---|---|
--dwc-transition-x-slow | 1000ms | |
--dwc-transition-slow | 500ms | |
--dwc-transition-medium | 250ms | |
--dwc-transition-fast | 150ms | |
--dwc-transition-x-fast | 50ms | |
--dwc-transition | var(--dwc-transition-medium) |
Easing
Easing variables define how values change over time, making transitions feel more natural.
Example
.element {
transition: transform var(--dwc-transition) var(--dwc-ease-inOutBack);
}
Try hovering over each easing preview to see its animation effect.