Transitions & Easing
Las variables de transición se utilizan para proporcionar duraciones de animación consistentes en toda su aplicación. Controlan cuánto tiempo tarda en completarse una animación.
Ejemplo
.element {
transition: var(--dwc-transition-slow) background-color;
}
Variables
| Variable | Valor Predeterminado | Ejemplo |
|---|---|---|
--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) |
Aceleración
Las variables de aceleración definen cómo cambian los valores con el tiempo, haciendo que las transiciones se sientan más naturales.
Ejemplo
.element {
transition: transform var(--dwc-transition) var(--dwc-ease-inOutBack);
}
Intenta pasar el cursor sobre cada vista previa de aceleración para ver su efecto de animación.