Propiedad animation-play-state de CSS

La propiedad animation-play-state de CSS especifica si la animación está en ejecución o en pausa. Si reanudas una animación en pausa, comenzará desde el punto en que se detuvo en lugar de empezar desde el inicio de la secuencia de animación. Además, puedes iniciar la animación desde un estado de pausa.

Cuando se especifican varios valores separados por comas para cualquier propiedad de animación, se asignarán a las animaciones definidas en animation-name de manera diferente.

La propiedad animation-play-state es una de las propiedades CSS3.

En JavaScript, esta propiedad se puede utilizar para pausar la animación a mitad de un ciclo.

Valor inicial	running
Se aplica a	Todos los elementos. También se aplica a los pseudo-elementos ::before y ::after.
Heredado	No.
Animable	No.
Versión	CSS3
Sintaxis DOM	object.style.animationPlayState = "paused";

Sintaxis

Sintaxis de la propiedad animation-play-state de CSS

css

animation-play-state: paused | running | initial | inherit;

Ejemplo de la propiedad animation-play-state con el valor "running":

Ejemplo de la propiedad CSS animation-play-state con el valor running

html

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 150px;
        height: 150px;
        background: #ccc;
        position: relative;
        animation: play 10s;
        animation-play-state: running;
      }
      @keyframes play {
        from {
          left: 0px;
        }
        to {
          left: 200px;
        }
      }
    </style>
  </head>
  <body>
    <h2>Ejemplo de animation-play-state</h2>
    <p>Aquí animation-play-state está configurado en "running".</p>
    <div></div>
  </body>
</html>

Try it Yourself »

En el siguiente ejemplo, la animación se detendrá al pasar el cursor sobre ella.

Ejemplo de la propiedad animation-play-state con el valor "paused":

Ejemplo de la propiedad CSS animation-play-state con el valor paused

html

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 150px;
        height: 150px;
        background: #8ebf42;
        position: relative;
        animation: play 1s infinite;
      }
      div:hover {
        animation-play-state: paused;
      }
      @keyframes play {
        from {
          left: 0px;
        }
        to {
          left: 200px;
        }
      }
    </style>
  </head>
  <body>
    <p>Pasa el cursor sobre el cuadro verde para detener la animación.</p>
    <div></div>
  </body>
</html>

Try it Yourself »

Valores

Valor	Descripción	Reproducir
running	Es el valor predeterminado cuando la animación está en ejecución.	Reproducir »
paused	La animación está en pausa.	Reproducir »
initial	Establece la propiedad en su valor predeterminado.
inherit	Hereda la propiedad de su elemento padre.

Práctica

¿Qué hace la propiedad CSS 'animation-play-state'?

Especifica si la animación está en ejecución o en pausa.Determina la velocidad de la animación.Transfiere el efecto de animación a sus elementos hijos.Define el color de la animación.Reinicia la animación cuando se establece en 'running' desde un estado 'paused'.

Propiedad animation-play-state de CSS ​

Sintaxis ​

Ejemplo de la propiedad animation-play-state con el valor "running": ​

Ejemplo de la propiedad animation-play-state con el valor "paused": ​