Tiempo de animación y percepción UX

1) Por qué el tiempo de espera es crítico

• sensación de respuesta instantánea y confianza en el sistema;
• La claridad de las causas-de instrucción de los enlaces (se ha trasladado de donde/donde el elemento);
• Cansancio y comodidad en largas sesiones;
• la precisión de las acciones (especialmente en móviles y en altas tarifas).

Regla: el tiempo de espera sirve al significado. Si la animación no ayuda a entender «lo que pasó», interfiere.

2) Psicofísica y umbrales

• ≤ 50 ms - eco de entrada (impresión, efecto de clic); parece instantáneo.
• ≤ 100 ms es el primer fiedback visual por acción (botón «pulsado»).
• 120-180 ms - hover/focus, transición de estado «suave».
• 180-280 ms - modales/paneles; se percibe como una aparición «natural».
• 300-500 ms - movimiento atento (elemento compartido), progreso «un paso adelante».
💡 700 ms - riesgos de «lentitud»; deje sólo si tiene sentido (por ejemplo, la confirmación de la victoria).
• ≈ 1200-1600 ms - ciclo skeleton/shimmer; Se cansa por más tiempo.

3) Curvas de aceleración (easing) y «peso»

• Estándar: 'cubic-bezier (0. 2, 0, 0. 2, 1) 'es una dinámica neutral «material».
• Aceleración (pressed): 'cubic-bezier (0. 4, 0, 1, 1) '- entrada rápida, clic corto.
• Ralentización (overlay out): 'cubic-bezier (0, 0, 0. 2, 1) '- salida suave.
• Acento acentuado (raramente): 'cubic-bezier (0. 2, 0. 8, 0. 2, 1. 2)` с overshoot ≤ 8 px.

Ópticas de peso: cuanto más grande es el componente (tarjeta, drower), más larga es la duración (+ 40-80 ms a la base).

4) Fases y coreografía

1. Iniciación (10-40 ms): fácil fade/scale 0. 98→1 - señal de inicio.

2. Transporte (fase principal): movimiento/divulgación.

3. Sedimento (20-60 ms): freno pequeño, estabilización de la sombra/anillo de enfoque.

• Listas: 20-40 ms/elemento, máximo 6-8 elementos consecutivos.
• Formas: sin cascada; todo aparece al mismo tiempo para no interferir con la entrada.

Reversibilidad: «atrás» espejo «adelante» y más rápido en un 15-30%.

5) Tiempos de espera por tipo de interacciones

6) Percepción del tiempo: cómo «acelerar» sin aceleración real

Instant affordance: cambio instantáneo de cursors/pressed-style ≤ 100 ms incluso antes de la red.
Ocultar complejidad: paralelizar descargas; arrastre los datos de fondo hasta que se abra el panel.
Anclaje semántico: el elemento compartido y la dirección del movimiento reducen el costo cognitivo de la espera.
Actualizaciones optimistas: IU está «listo» inmediatamente, el servidor confirma o retrotrae.

7) Cansancio e higiene de las animaciones

Evite pulsaciones interminables; cualquier bucle debe ser discontinuo o inhabilitable.
Los microefectos en las matrices de elementos (tabla, grid) se hacen sin blur/box-shadow en cada nodo.
Mantener 'prefers-reducidos-motion: reducir': dejar sólo fade ≤ 100 ms o un interruptor de estado estático.

css
@media (prefers-reduced-motion: reduce) {
{ animation: none! important; transition-duration:.01ms! important; }
}

8) Tokens de tiempo (sistema de diseño)

json
{
"motion": {
"duration": { "press": 90, "hover": 160, "focus": 160, "overlayIn": 240, "overlayOut": 180, "tab": 200, "shared": 280 },
"easing": {
"standard": "cubic-bezier(0. 2,0,0. 2,1)",
"accelerate": "cubic-bezier(0. 4,0,1,1)",
"decelerate": "cubic-bezier(0,0,0. 2,1)"
},
"stagger": { "listItem": 30, "maxItems": 8 }
}
}

Nomenclatura: 'motion. duration.{role}` и `motion. easing. {role} '- unificado para el motor de componentes y Figma.

9) Implementación: CSS y Framer Motion

css
:root{
--dur-press:90ms; --dur-hover:160ms; --dur-overlay-in:240ms; --dur-overlay-out:180ms;
--ease-std:cubic-bezier(.2,0,.2,1);
--ease-acc:cubic-bezier(.4,0,1,1);
--ease-dec:cubic-bezier(0,0,.2,1);
}
.button{ transition: transform var(--dur-press) var(--ease-acc), box-shadow var(--dur-hover) var(--ease-std); }
.button:active{ transform: scale(.98); }
.modal-enter{ animation: modalIn var(--dur-overlay-in) var(--ease-std) both; }
.modal-exit { animation: modalOut var(--dur-overlay-out) var(--ease-dec) both; }
@keyframes modalIn{ from{opacity:0; transform:translateY(16px) scale(.98)} to{opacity:1; transform:none} }
@keyframes modalOut{ from{opacity:1} to{opacity:0; transform:translateY(8px) scale(.99)} }

tsx import { motion, AnimatePresence } from "framer-motion";

export function Modal({ open, children }) {
return (
<AnimatePresence>
{open && (
<motion. div initial={{opacity:0}} animate={{opacity:1}} exit={{opacity:0}}
transition={{duration:.18, ease:[0. 2,0,0. 2,1]}} className="fixed inset-0 bg-black/50">
<motion. div initial={{y:16, scale:.98, opacity:0}}
animate={{y:0, scale:1, opacity:1, transition:{duration:.24, ease:[0. 2,0,0. 2,1]}}}
exit={{y:8, scale:.99, opacity:0, transition:{duration:.18, ease:[0,0,0. 2,1]}}}
className="m-auto max-w-lg rounded-2xl bg-white p-6">
{children}
</motion. div>
</motion. div>
)}
</AnimatePresence>
);
}

10) Composición del tiempo: paralelo vs secuencia

Paralelo (fade + translate al mismo tiempo) - más rápido en la sensación.
La secuencia (primero el contenedor, luego el contenido) es más clara en la estructura, pero más larga. Aplique cuando sea importante mostrar la jerarquía.
Evite los «pasos»> 60 ms entre elementos estrechamente relacionados en un solo bloque.

11) Tiempo de espera y contenido

Texto: no anime letter/word-by-word en los productos; es una técnica de marketing.
Números/contadores: paso 40-60 ms batches, sin temblar layout (tabular-nums).
Gráficos: apertura de la serie 180-240 ms, hover-highlight ≤ 120 ms.

12) Disponibilidad y error de percepción

Los estilos de enfoque deben aparecer sin demora.
Advertencias/errores: la animación es mínima (≤ 120 ms), sin sacudir si el usuario tiene AT (assistive tech).
Evite los destellos> 3/s y los parpadeos de gran contraste.

13) Especificidad de iGaming

• Prensa ≤ 100 ms; el estado 'busy' inmediatamente; tostado/indicador final - sin retrasos.
• El tiempo de respuesta de IU es más importante que la animación de confirmación: la confirmación es corta 120-160 ms.

• Inicio ≤ 200 ms, ciclo uniforme, frenado 300-500 ms; sin parpadeos interminables.
• Win-splash ≤ 500 ms, sin estroboscopio; el texto de la suma es AAA.

• Actualizaciones de batch (250-1000 ms); diff visual ≤ 160 ms; sin saltos de diseño.
• En hover/focus - debauns de iluminación 80-120 ms para no «parpadear».

14) Anti-patrones

Curvas lineales para movimientos (sensación de «mecánica»).
Duraciones> 400 ms para estados simples del botón.
Cascada de 100 + ms en una lista de decenas de elementos (gravitación).
Sombras/blur en cientos de elementos en la animación.
Incoherencia: las mismas acciones con diferentes temporizaciones en el mismo producto.
Enfoque diferido o retraso en la activación por teclado.

15) QA-check-list de temporizaciones

Konsistentnost

• Los tiempos y las curvas se toman de los tokens, los mismos para las mismas acciones.

Respuesta

• Press/hover/focus se ajustan a una escala de 80-180 ms.
• Primera respuesta visual ≤ 100 ms.

Coreografía

• La entrada y la salida son simétricas; la salida es más rápida que la entrada en un 15-30%.
• La cascada no supera los 8 elementos y los 40 ms de paso.

A11y

• 'prefers-reduced-motion' apoyado; enfoque sin demora.
• Sin parpadeos> 3/s.

Performance

• Sólo se animan 'transformación/opacity'; no hay blur/sombras masivas.

16) Documentación en el sistema de diseño

«Motion Tokens»: duration/easing/stagger + mapa de aplicaciones (button, overlay, amb, list).
«Rhythm & Phasing»: esquemas de cascada y reversibilidad.
«Reducción de movimiento»: reglas de degradación y ejemplos.
"Do/Don 't': clips cortos con códigos de tiempo y métricas de destino (INP/First Feedback).

Resumen breve

Un buen tiempo es una respuesta instantánea, una coreografía comprensible y curvas económicas. Mantenga las duraciones cortas para los micro-estados, estire sólo donde agregue significado, mantenga la reducción-motion y no anime las propiedades «caras». Entonces la interfaz se siente en vivo y confiable - especialmente en escenarios de tiempo real y apuestas altas.