Tokens · Familias de tokens

Movimiento

Las duraciones y funciones de aceleración de cada transición, que pasan a cero cuando quien lee prefiere reducir el movimiento. Incluido en @luz-ds/tokens.

Archivos: tokens.json → duration, tokens.json → easing

Esta traducción la ha escrito una IA y todavía no la ha revisado ninguna persona. Leer esta página en inglés

Obtén todas las duraciones de un token. Con prefers-reduced-motion: reduce, todas pasan a 0s, así que el movimiento se detiene en todas partes sin CSS adicional.

Ejecutar transiciones

La reducción del movimiento está activada, así que los puntos saltan en vez de desplazarse.

Duraciones

--luz-duration-instant 0.05s
--luz-duration-fast 0.1s
--luz-duration-base 0.2s
--luz-duration-slow 0.3s
--luz-duration-slower 0.5s
--luz-duration-lazy 0.8s

Funciones de aceleración

--luz-easing-standard cubic-bezier(0.3, 0, 0.1, 1)
--luz-easing-enter cubic-bezier(0.15, 0.6, 0.3, 1)
--luz-easing-exit cubic-bezier(0.5, 0, 0.85, 0.4)
--luz-easing-spring cubic-bezier(0.3, 1.35, 0.55, 1)
--luz-easing-linear lineal

Incluido en tokens, con el cambio a 0s cuando se prefiere reducir el movimiento, así que una página solo con tokens también pierde su movimiento.

.panel {
  transition: opacity var(--luz-duration-base) var(--luz-easing-standard);
}

Estándar para los movimientos dentro de la página, entrada para lo que aparece y salida para lo que desaparece.
Elástico se pasa un poco: resérvalo para detalles pequeños y desenfadados.
No escribas una duración fija en el código: ignoraría la preferencia de movimiento reducido.