CSS animation-play-state Property

CSS animation-play-state property specifies whether the animation is running or paused.

This property is generally used in JavaScript to play or pause the animation, or to check whether the animation is running or not.

Example:

.div1{
  animation-play-state: running;
}
.div2{
  animation-play-state: paused;
}

The animation-play-state property has the below syntax:

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

The animation-play-state property accepts the following values:

running	This is the default value. It specifies that the animation is running.
paused	Specifies that the animation is paused.
initial	Sets the animation-play-state property to its default value(running).
inherit	Inherits the animation-play-state property from the parent element.

Default Value	running
Inherited	No
JavaScript Usage	element.style.animationPlayState = “paused”;

Manoj Kumar

Hi, My name is Manoj Kumar. I am a full-stack developer with a passion for creating robust and efficient web applications. I have hands-on experience with a diverse set of technologies, including but not limited to HTML, CSS, JavaScript, TypeScript, Angular, Node.js, Express, React, and MongoDB.

View all posts