Transitions & Easing
Transitionvariabelen worden gebruikt om consistente animatieduur in uw app te bieden. Ze bepalen hoe lang een animatie duurt om te voltooien.
Voorbeeld
.element {
transition: var(--dwc-transition-slow) background-color;
}
Variabelen
| Variabele | Standaardwaarde | Voorbeeld |
|---|---|---|
--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
Easingvariabelen definiëren hoe waarden in de loop van de tijd veranderen, waardoor overgangen natuurlijker aanvoelen.
Voorbeeld
.element {
transition: transform var(--dwc-transition) var(--dwc-ease-inOutBack);
}
Probeer met de muis over elke easing-preview te gaan om het animatie-effect te zien.