Animate

Cuando usarlo

/impeccable animate es para interfaces que se sienten inertes, donde los cambios de estado son instantaneos y bruscos, donde la carga simplemente aparece, donde el usuario nunca confia del todo en que su clic se registro. Usalo para agregar los pequenos movimientos que comunican lo que esta pasando: entradas, salidas, retroalimentacion, transiciones entre estados.

No lo uses para agregar rebotes o resortes elasticos por el bien de la energia. Eso es decoracion, y esta habilidad no te lo dara.

Como funciona

La habilidad identifica momentos estaticos que se beneficiarian del movimiento, y luego los aplica con disciplina estricta:

1. Entradas y salidas: los elementos aparecen y se van con fundidos de 200 a 300ms mas sutil Y o escala, nunca propiedades de layout.
2. Retroalimentacion de estado: hover, active, focus, carga, exito comunican a traves de movimiento en lugar de intercambios repentinos.
3. Transiciones entre vistas: transiciones de elemento compartido donde tiene sentido, fundido intermedio de lo contrario.
4. Progreso y carga: pantallas esqueleto, barras determinadas, movimiento que dice “todavia trabajando”.
5. Movimiento reducido: cada animacion tiene un fallback prefers-reduced-motion.

El suavizado siempre es exponencial (ease-out-quart, quint o expo) porque los objetos reales desaceleran suavemente. Sin rebote, sin elastico, sin lineal para nada excepto indicadores de progreso.

La habilidad anima solo transform y opacity. Si te encuentras animando width, height, top o left, esta haciendo lo incorrecto. Usa grid-template-rows para transiciones de altura.

Probalo

/impeccable animate the sign-up flow

Adiciones tipicas:

• El input de email recibe un resplandor de enfoque en focus-visible (opacidad + sombra, 180ms)
• El boton de envio muestra un spinner dentro de si mismo en estado de carga, no un spinner separado al lado
• La pantalla de exito entra con opacidad + translateY(8px), 260ms, ease-out-quart
• El mensaje de error se desliza hacia abajo con grid-template-rows (no height), 220ms
• Fallback @media (prefers-reduced-motion: reduce) para cada transicion

Errores comunes

• Pedir “mas animacion”. Animate no es una perilla. Agrega donde el movimiento comunica, no en todas partes.
• Eliminar los fallbacks de movimiento reducido. La habilidad los agrega automaticamente. Innegociable para accesibilidad.