¿Qué hace motion?
Motion explica el cambio y confirma la entrada. Si no hace ninguna de las dos cosas, es decoración y necesita una razón.
1. ¿Debería animarse?
| Con qué frecuencia lo ve el usuario | Decisión |
|---|---|
| 100+ veces al día (atajos, alternar paleta, escritura) | Nunca animar |
| Decenas de veces (hover, navegación en listas, pestañas) | Mínimo o nada (color/opacidad por debajo de 150ms) |
| Ocasionalmente (modal, cajón, toast, desplegable) | Transición estándar |
| Raramente (onboarding, éxito, hero de primera visita) | Espacio para deleite |
Nunca animar acciones disparadas por teclado.
2. Easing
- Al entrar o salir: ease-out fuerte
cubic-bezier(.23, 1, .32, 1). - Moviéndose en pantalla: ease-in-out
cubic-bezier(.77, 0, .175, 1). - Cajones/paneles:
cubic-bezier(.32, .72, 0, 1). - Color/hover:
ease. Movimiento constante (marquee, progreso):linear. - Nunca
ease-inen UI; se siente lento en el momento en que el usuario está mirando.
3. Duración
Presión 100-160ms · tooltip 125-200ms · desplegable 150-250ms · modal/cajón 200-400ms · hero de marketing hasta 800ms. Las salidas ~20% más rápidas que las entradas. El movimiento UI se mantiene por debajo de 300ms.
4. Reglas de oficio
- Animar solo
transformyopacity. Nuncawidth,height,top,leftotransition: all. - Nada aparece desde
scale(0); comenzar enscale(.95)+opacity: 0. - Popovers y menús escalan desde su disparador (
transform-originen el disparador). Los modales se mantienen centrados. - Botones:
:active { transform: scale(.97) }con una transición de 120ms. - Tooltips: retrasar el primero (~400ms); los adyacentes se abren instantáneamente.
- Escalonar listas 30-50ms por elemento, con un tope total inferior a 400ms.
- Revelaciones al hacer scroll: como máximo una por página, distancia pequeña (8-16px), ejecutar una vez. No en cada sección.
- Muelles (springs, Motion/Framer, React Spring) para arrastre, gestos y movimiento interrumpible:
{ type: "spring", duration: .4, bounce: .15 }. Mantener bounce entre 0.1-0.3, y solo en superficies lúdicas. - Preferir transiciones CSS y
@starting-stylepara entrada/salida simples; la API View Transitions para morphs de página/estado; una librería JS solo cuando gestos o secuencias lo requieran.
5. Movimiento reducido (obligatorio)
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
scroll-behavior: auto !important;
}
}
Mantener cambios de opacidad y color de estado; eliminar movimiento, paralaje y sacudidas.
Formato de revisión
Al revisar código de animación, responder con una tabla: | Antes | Después | Por qué |, una fila por problema.