Transitions & Easing
Übergangsvariablen werden verwendet, um konsistente Animationsdauern in Ihrer App bereitzustellen. Sie steuern, wie lange eine Animation benötigt, um abgeschlossen zu werden.
Beispiel
.element {
transition: var(--dwc-transition-slow) background-color;
}
Variablen
| Variable | Standardwert | Beispiel |
|---|---|---|
--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-Variablen definieren, wie Werte sich über die Zeit ändern, wodurch Übergänge natürlicher wirken.
Beispiel
.element {
transition: transform var(--dwc-transition) var(--dwc-ease-inOutBack);
}
Versuchen Sie, über jede Easing-Vorschau zu fahren, um ihren Animationseffekt zu sehen.