Animation Play State
El botón de pausa de tu animación
Imagina que estás viendo un video y alguien te habla. Pulsas pausa, respondes, y cuando vuelves a pulsar play, el video no empieza desde el principio; continúa exactamente donde lo dejaste. Eso es exactamente lo que hace animation-play-state.
A diferencia de quitarle el nombre de la animación a un elemento (lo cual resetearía la animación de vuelta a 0 de inmediato), alterar el play-state congela los valores de todos los estilos interpolados en ese milisegundo exacto de la línea de tiempo.
Los dos únicos estados
- ✦ running: (Por defecto) La animación avanza por su línea de tiempo normalmente.
- ✦ paused: La animación se congela. El reloj se detiene y el elemento mantiene exactamente los estilos interpolados que tenía en ese instante.
El caso de uso más importante: accesibilidad y UX
Hay una regla fundamental en accesibilidad web y diseño premium: nunca asumas que a todos los usuarios les gusta el movimiento constante. Para personas con desórdenes vestibulares o problemas de atención, una marquesina de logos moviéndose infinitamente hace que leer el resto de la página sea sumamente difícil.
El patrón de diseño más elegante para solucionar esto es pausar las animaciones cuando el usuario posiciona el cursor sobre ellas (:hover). Esto le devuelve el control al usuario de forma intuitiva sin necesidad de escribir una sola línea de JavaScript:
.marquee-container:hover .marquee-track {
animation-play-state: paused;
}Pausas interactivas con JavaScript
Cuando el control de la pausa no depende del puntero sino de la lógica de negocio (por ejemplo, pausar una animación de fondo al abrir el menú principal), usar JavaScript para alternar una clase utilitaria es la forma profesional de hacerlo.
Consejo profesional
Pausar animaciones pesadas cuando no están visibles en pantalla (por ejemplo, fuera del viewport mediante un IntersectionObserver) es una técnica excelente para reducir drásticamente el consumo de batería en smartphones.
Ejemplo práctico
<div class="interactive-control">
<div class="control-box animate-box">Genesis</div>
<button id="toggle-play-btn" class="control-btn">Pausar</button>
</div>Haz clic en el botón de abajo para pausar o reanudar el movimiento orbital del círculo en su posición exacta actual.
Errores comunes
Practica lo aprendido
Utiliza el botón interactivo para alternar el estado de ejecución y observa cómo se detiene instantáneamente.