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.


  animation-play-state: running;
  animation-play-state: paused;

CSS Syntax

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

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

Property Values

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

runningThis is the default value. It specifies that the animation is running.
pausedSpecifies that the animation is paused.
initialSets the animation-play-state property to its default value(running).
inheritInherits the animation-play-state property from the parent element.

General Info

Default Valuerunning
JavaScript Usageelement.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.

Leave a Comment