¿Sabías que puedes pausar y reanudar una animación en tu sitio web con solo una línea de código usando la propiedad animation play state? Si necesitas crear efectos dinámicos o darle mayor control a los usuarios sobre lo que ocurre en pantalla, esta propiedad puede ser de mucha ayuda. En este artículo, vamos a contarte qué es animation play state en CSS, para qué sirve y cómo funciona, para que puedas integrarla en tus proyectos web y crear sitios memorables.
¿Qué es animation play state en CSS?
Animation play state es una de las propiedades que ofrece CSS para manejar animaciones en una página web. Particularmente, el objetivo principal de esta propiedad es definir si una animación debe estar en ejecución o detenerse temporalmente. Esta función es especialmente útil cuando deseas tener un mayor control sobre el comportamiento de las animaciones en respuesta a eventos del usuario o condiciones específicas del diseño.
De esta manera, cuando la animación se pausa, el elemento afectado se congela en el estado exacto donde estaba, a la espera de reanudarse desde ese mismo punto. Por esto, es perfecto para crear experiencias de usuario más fluidas y dinámicas.
¿Para qué sirve animation play state en CSS?
La propiedad animation play state puede tener un impacto significativo en la experiencia del usuario al brindar mayor control sobre el comportamiento de las animaciones. Así que veamos con más detalle cuáles son sus principales usos:
Pausar animaciones al interactuar con el usuario
Esta propiedad permite al usuario interactuar con el contenido de una forma más precisa y controlada, lo que mejora la usabilidad de la página. Por ejemplo, podría detener una animación al pasar el cursor por encima de un elemento.
Controlar animaciones en un carrusel
También permite que una animación solo ocurra cuando el usuario está viendo una diapositiva específica. De esta manera, ayuda a mantener su atención en el contenido relevante y evita que se distraiga innecesariamente.
Aumentar la accesibilidad
Una de sus principales ventajas es que le da a los usuarios la opción de detener animaciones que los puedan distraer o incomodar. Así, tiene mayor control sobre su experiencia de navegación en la página, lo que es especialmente importante para personas sensibles a los movimientos rápidos o los efectos visuales constantes
Crear efectos personalizados
La posibilidad de detener una animación puede brindar una interacción más interesante. De esta manera, puedes contar una “historia visual” en la interfaz, lo que hará que la experiencia de navegación sea más interesante y dinámica.
Sintaxis de animation play state en CSS
La sintaxis de la propiedad animation play state es bastante sencilla, como todo en CSS:
animation-play-state: running | paused;Valores de animation play state en CSS
Ahora, veamos cuáles son los dos valores que existen para esta propiedad:
running
Se trata del valor que viene establecido por defecto, e indica que la animación está en curso.
.elemento {
animation-play-state: running;
}paused
Este es el valor que detiene temporalmente la animación.
.elemento {
animation-play-state: paused;
}Además, puedes usar esta propiedad con múltiples animaciones declaradas, separando los valores por comas de la siguiente manera:
animation-play-state: running, paused;Ejemplos de animation play state en CSS
Ahora que conoces su sintaxis y sus valores posibles, veamos algunos ejemplos de cómo usar animation play state en tus páginas web:
Pausar y reanudar con estilos
Imagina que tienes un elemento con una animación básica, como en el siguiente ejemplo:
@keyframes move {
from { transform: translateX(0); }
to { transform: translateX(100px); }
}
div {
width: 100px;
height: 100px;
background-color: coral;
animation: move 3s infinite;
animation-play-state: running;
}Aquí, puedes pausar esta animación simplemente cambiando el valor de animation-play-state a paused:
div:hover {
animation-play-state: paused;
}De esta manera, cuando el usuario pase el cursor sobre el elemento, la animación se detendrá.
Pausar con JavaScript
Además de los estilos CSS, también puedes controlar animation-play-state directamente desde JavaScript para crear interacciones más avanzadas. Por ejemplo:
const animatedElement = document.querySelector(".animado");
animatedElement.addEventListener("click", () => {
if (getComputedStyle(animatedElement).animationPlayState === "running") {
animatedElement.style.animationPlayState = "paused";
} else {
animatedElement.style.animationPlayState = "running";
}
});Así, la animación se pausará o reanudará cada vez que el usuario haga clic en el elemento.
Animation play state en navegadores
Esta propiedad es compatible con la mayoría de los navegadores modernos, incluidos Chrome, Firefox, Safari y Edge. Sin embargo, si trabajas en proyectos que requieren soporte para navegadores más antiguos, es recomendable que verifiques la compatibilidad en herramientas como Can I Use.
Como puedes ver, usar animation play state en CSS te permite personalizar el comportamiento de las animaciones, de manera que pausar el movimiento al pasar el cursor o controlarlas mediante JavaScript. Aquí, lo importante es que esta propiedad te ofrece la flexibilidad que necesitas para crear experiencias interactivas y atractivas.
¿Quieres aprender más sobre animaciones y otros conceptos clave de desarrollo web? Únete al Bootcamp de Desarrollo Web de KeepCoding. En pocos meses podrás desarrollar las habilidades y dominar los lenguajes de programación que necesitas para empezar una nueva carrera en el sector IT.
¿Qué esperas para transformar tu futuro profesional?
