La Propiedad ANIMATION-PLAY-STATE

La propiedad animation-play-state en CSS te permite controlar si una animación CSS está actualmente en ejecución o pausada.

La propiedad animation-play-state en CSS te permite controlar si una animación CSS está actualmente en ejecución o pausada. Es una herramienta útil para crear animaciones interactivas que pueden ser detenidas y reanudadas según las necesidades del usuario o el estado de la aplicación.

Sintaxis Básica

La sintaxis básica para usar la propiedad animation-play-state es la siguiente:

CSS
 
selector {
  animation-play-state: valor;
}

Donde selector es el elemento HTML al que quieres controlar la animación y valor puede ser uno de los siguientes:

Valores de la Propiedad animation-play-state

La propiedad animation-play-state puede tomar dos valores principales:

1. running

Este es el valor predeterminado. Indica que la animación debe estar en ejecución. Si una animación está configurada para iniciarse, estará en este estado a menos que se especifique lo contrario.

Ejemplo (por defecto):

HTML
 
<!DOCTYPE html>
<html>
<head>
<style>
  .cuadro {
    width: 100px;
    height: 100px;
    background-color: red;
    position: relative;
    animation-name: moverCuadro;
    animation-duration: 2s;
    animation-iteration-count: infinite;
  }

  @keyframes moverCuadro {
    from { left: 0; }
    to { left: 300px; }
  }
</style>
</head>
<body>

  <div class="cuadro">Este cuadro se está moviendo (running por defecto).</div>

</body>
</html>

En este ejemplo, la animación moverCuadro comenzará a ejecutarse inmediatamente y se repetirá infinitamente porque animation-play-state está implícitamente establecido en running.

2. paused

Este valor indica que la animación debe detenerse en su estado actual. La animación se pausará en el fotograma exacto en el que se encontraba cuando se aplicó el valor paused.

Ejemplo (inicialmente pausado):

HTML
 
<!DOCTYPE html>
<html>
<head>
<style>
  .circulo {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: blue;
    animation-name: cambiarOpacidad;
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-play-state: paused; /* La animación comienza pausada */
  }

  @keyframes cambiarOpacidad {
    from { opacity: 1; }
    to { opacity: 0.3; }
  }
</style>
</head>
<body>

  <div class="circulo">Este círculo está inicialmente pausado.</div>

</body>
</html>

En este ejemplo, la animación cambiarOpacidad no comenzará a ejecutarse hasta que se cambie su animation-play-state a running.

Controlando la Animación con JavaScript

La propiedad animation-play-state es más útil cuando se manipula dinámicamente con JavaScript para crear interacciones.

Ejemplo: Pausar y Reanudar con Botones

HTML
 
<!DOCTYPE html>
<html>
<head>
<style>
  .elemento {
    width: 80px;
    height: 80px;
    background-color: green;
    position: relative;
    animation-name: rotar;
    animation-duration: 2s;
    animation-iteration-count: infinite;
  }

  @keyframes rotar {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }
</style>
</head>
<body>

  <div class="elemento" id="miElemento"></div>
  <button onclick="toggleAnimation()">Pausar/Reanudar</button>

  <script>
    const elemento = document.getElementById('miElemento');
    let isPaused = false;

    function toggleAnimation() {
      if (isPaused) {
        elemento.style.animationPlayState = 'running';
        isPaused = false;
      } else {
        elemento.style.animationPlayState = 'paused';
        isPaused = true;
      }
    }
  </script>

</body>
</html>

En este ejemplo:

  1. Tenemos un div con la clase elemento que tiene una animación de rotación infinita.
  2. Un botón llama a la función toggleAnimation() cuando se hace clic.
  3. La función toggleAnimation() verifica el estado actual de la animación (isPaused).
  4. Si la animación está pausada, la cambia a running y actualiza la variable isPaused.
  5. Si la animación está en ejecución, la cambia a paused y actualiza la variable isPaused.

Ejemplo: Pausar al Pasar el Ratón

HTML
 
<!DOCTYPE html>
<html>
<head>
<style>
  .mensaje {
    background-color: yellow;
    padding: 15px;
    font-size: 1.2em;
    animation-name: cambiarColor;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
  }

  .mensaje:hover {
    animation-play-state: paused; /* Pausa la animación al pasar el ratón */
  }

  @keyframes cambiarColor {
    0% { background-color: yellow; }
    100% { background-color: orange; }
  }
</style>
</head>
<body>

  <div class="mensaje">Pasa el ratón por encima para pausar el cambio de color.</div>

</body>
</html>

Aquí, la animación de cambio de color del div se pausará cuando el usuario coloque el cursor del ratón sobre él gracias a la pseudo-clase :hover.

Relación con Otras Propiedades de Animación

La propiedad animation-play-state no afecta la definición de la animación en sí (como los fotogramas clave, la duración, etc.). Simplemente controla si la animación definida por animation-name está actualmente activa o detenida.

Casos de Uso Comunes

  • Controles de reproducción: Implementar botones de "Play" y "Pause" para animaciones.
  • Animaciones al pasar el ratón: Iniciar o pausar animaciones cuando el usuario interactúa con un elemento.
  • Indicadores de carga: Detener la animación de carga una vez que los datos se han cargado.
  • Animaciones basadas en el desplazamiento (scroll-based animations): Pausar o reanudar animaciones según la posición del usuario en la página.
  • Efectos de revelado: Animar la aparición de un elemento y permitir que el usuario pause la animación para examinarlo.

Consideraciones

  • La propiedad animation-play-state es una forma sencilla de controlar la ejecución de las animaciones. Para un control más fino (como ir a un punto específico de la animación), puedes usar las propiedades relacionadas con el tiempo de la animación en JavaScript.
  • Asegúrate de que la interacción de pausa/reanudación sea intuitiva para el usuario.

Conclusión

La propiedad animation-play-state te brinda la capacidad de controlar el flujo de tus animaciones CSS. Al permitirte pausar y reanudar animaciones dinámicamente, puedes crear experiencias de usuario más interactivas y atractivas. ¡Experimenta con diferentes escenarios y combina animation-play-state con JavaScript para desbloquear todo el potencial de las animaciones en tu sitio web!