Animaciones que ayudan en lugar de estorbar

El propósito antes que el efecto

Cada animación debe responder una pregunta del usuario: ¿de dónde vino esto? ¿qué cambió? ¿mi clic funcionó? Si una animación no responde ninguna, es decoración, y la decoración en movimiento cansa rápido.

Tres reglas que seguimos

1. Duración corta, curva natural

Entre 150 y 400 ms para casi todo. Más lento se siente pesado; más rápido no se percibe. Y nunca lineal: el movimiento real acelera y frena.

2. Movimiento sutil, no acrobacias

Un desplazamiento de 12 a 24 píxeles con una entrada de opacidad comunica "esto es nuevo" sin robar la atención. Un giro de 360 grados comunica "mírame a mí" y le quita protagonismo al contenido.

3. Respetar a quien pide menos movimiento

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

No es un detalle opcional: para personas con trastornos vestibulares, una animación agresiva provoca mareo real. Este sitio respeta esa preferencia en todas sus páginas.

La prueba final

Desactive todas las animaciones y recorra el sitio. Si se sigue entendiendo, las animaciones estaban ayudando. Si algo deja de entenderse, el movimiento estaba tapando un problema de diseño.