Animaciones (animation-play-state)

La propiedad CSS animation-play-state determina si una animación está en ejecución o en pausa. Puede ser consultada para determinar si la animación se está ejecutando. Además, su valor se puede establecer para pausar y reanudar una animación.

La propiedad animation-play-state especifica si la animación se está ejecutando o en pausa.

Nota: Utilice esta propiedad en un JavaScript para pausar una animación en medio de un ciclo.

animation-play-state: paused |running

Opciones

  • paused Especifica que la animación está en pausa.
  • running Valor por defecto. Especifica que la animación se está ejecutando.

Ejemplos

<!DOCTYPE html>
<html>
<head>
<style> 

.op1 {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation: mymove 5s infinite;
 animation-play-state: paused;
}

@keyframes mymove {
  from {left: 0px;}
  to {left: 400px;}
}

.op1:hover {
  animation-play-state: running;;
}

</style>
</head>
<body>

<p>La animación comienza pausada , pero si colocamos el mouse sobre el cuadarado rojo se mueve , si lo sacamos se para:</p>
<div class="op1"></div>
<p><strong>Nota:</strong> La propiedad animation-play-state property no es soportada en ver Internet Explorer 9 y versiones anteriores.</p>

</body>
</html>

La animación comienza pausada , pero si colocamos el mouse sobre el cuadarado rojo se mueve , si lo sacamos se para:

Nota: La propiedad animation-play-state property no es soportada en ver Internet Explorer 9 y versiones anteriores.



<!DOCTYPE html>
<html>
<head>
<style> 

.op2 {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation: mymove 5s infinite;
 animation-play-state: running;
}

@keyframes mymove {
  from {left: 0px;}
  to {left: 400px;}
}

.op1:hover {
  animation-play-state: paused;
}

</style>
</head>
<body>

<p>La animación comienza corriendo , pero si colocamos el mouse sobre el cuadarado dorado se para , si lo sacamos se vuelve a funcionar:</p>
<div class="op2"></div>
<p><strong>Nota:</strong> La propiedad animation-play-state property no es soportada en ver Internet Explorer 9 y versiones anteriores.</p>

</body>
</html>

La animación comienza corriendo , pero si colocamos el mouse sobre el cuadarado dorado se para , si lo sacamos se vuelve a funcionar:

Nota: La propiedad animation-play-state property no es soportada en ver Internet Explorer 9 y versiones anteriores.