Duración
BetaLa escala de tiempos del sistema y cuándo usar cada paso.
La regla general: más grande el elemento (o más lejos viaja), más larga la duración. Un hover no puede tardar lo que tarda un drawer.
Escala
Reproducí todas juntas para sentir la diferencia relativa.
Todas con ease-move — click para comparar
instant100msFeedback inmediato: hover, focus, toggles.Oficial
fast200msMicro-interacciones: dropdowns, tooltips, chips.Oficial
base300msEl default: modales, reveals, transiciones de contenido.Oficial
slow500msElementos grandes: paneles, drawers, hero.Oficial
slower800msEscenas completas o secuencias coreografiadas.Oficial
Reglas de uso
- Micro-feedback (hover, focus):
instant— si se nota la animación, es lenta. - Todo lo que aparece/desaparece en el flujo de lectura:
fastobase. slowersolo para coreografías (como el hero del landing) — nunca para responder a una acción del usuario.prefers-reduced-motionno es opcional: toda animación del sistema se desactiva o reduce congsap.matchMedia()o la variantemotion-reduce:.