Transiciones, animación y transforms.
El movimiento explica cambio de estado y se elimina cuando la persona lo reduce.
Referencia
Tailwind genera estas utilidades durante el build. Style fija los tokens aceptados, los defaults y las restricciones del grupo.
| Propiedad o familia | Uso en v10 | Criterio |
|---|---|---|
| transition-property / behavior | Sólo propiedades necesarias | No transition:all |
| duration / timing / delay | Escala rápida, base y lenta | Sin retrasar feedback esencial |
| animation | Carga o cambio de estado | Pausable y sin bucle decorativo |
| backface-visibility | Transform 3D excepcional | No en navegación común |
| perspective / origin | Visualización especial | Alternativa sin 3D |
| rotate / scale / skew / translate | Iconos, disclosure y feedback | No mover foco o lectura |
| transform-origin / style | Control de transformación | Declarar motivo |
| zoom | No usar para layout | El zoom pertenece al navegador |
Reglas de Style
- prefers-reduced-motion reduce anula transiciones y bucles en todos los elementos y sus pseudo-elementos.
- En mapas e isométrico, la vista estática es el inicio; cualquier avance opcional requiere controles visibles de pausar y reanudar, y no se activa con movimiento reducido.
- La transición no demora más la respuesta del control.
- No animar layout con texto largo sin prueba.
- El estado final existe aunque la animación no corra.
Contrato de uso
- Usar utilidades para ajustes locales y prototipos acotados.
- Usar una clase semántica de Kit cuando el patrón se repite o tiene comportamiento.
- No construir clases dinámicamente; cada nombre debe aparecer completo en el código fuente.
- No usar valores arbitrarios para reemplazar un token que falta. Proponer primero el token.
- Verificar 320 px, 200% de zoom, tema oscuro y reducción de movimiento cuando aplique.