Transitions & Easing
Les variables de transition sont utilisées pour fournir des durées d'animation cohérentes dans votre application. Elles contrôlent la durée de la complétion d'une animation.
Exemple
.element {
transition: var(--dwc-transition-slow) background-color;
}
Variables
| Variable | Valeur par défaut | Exemple |
|---|---|---|
--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
Les variables d'accélération définissent comment les valeurs changent au fil du temps, rendant les transitions plus naturelles.
Exemple
.element {
transition: transform var(--dwc-transition) var(--dwc-ease-inOutBack);
}
Essayez de passer la souris sur chaque aperçu d'accélération pour voir son effet d'animation.