CSS - animation-play-state Property

The CSS property animation-play-state checks whether an animation is actively running or in a paused state.

If a paused animation is resumed, it will continue from the point where it was paused, keeping the progress instead of restarting from the first frame of the animation sequence.

Possible Values

The CSS property animation-play-state can have one of the following values:

  • running - The animation is currently in progress.

  • paused - The animation is currently in a paused state.

Note: When multiple comma-separated values on an animation-* property is specified, the values are applied to the animations in the order in which the animation-names appear.

Syntax

animation-play-state = <single-animation-play-state>#  

<single-animation-play-state> = running | paused

Applies To

All the HTML elements, ::before and ::after pseudo-elements.

CSS animation-play-state - Running State

  • In the following example, the animation-play-state property controls whether the animation is actively running or paused by default.

  • It is set to running, the animation stays running.

  • It allows the animation to commence and the circle to pulsate with a scaling effect when the cursor hovers over it.

<html>
<head>
<style>
   body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 250px;
      margin: 0;
      background-color: #f0f0f0;
   }
   .circle-demo {
      width: 100px;
      height: 100px;
      background-color: #ff6347;
      border-radius: 50%;
      animation-name: pulse;
      animation-duration: 1s;
      animation-iteration-count: infinite;
      animation-play-state: running;
   }
   
   @keyframes pulse {
      0% {
         transform: scale(1);
      }
      50% {
         transform: scale(1.8);
      }
      100% {
         transform: scale(1);
      }
   }
</style>
</head>
<body>
   <div class="circle-demo"></div>
</body>
</html>

CSS animation-play-state - Paused State

  • In the following example, the animation-play-state property controls whether the animation is actively running or paused by default.

  • It is set to paused, the animation stays paused.

  • It doesn't allow the animation to commence and continue.

<html>
<head>
<style>
   body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 200px;
      margin: 0;
      background-color: #f0f0f0;
   }
   .circle-demo {
      width: 100px;
      height: 100px;
      background-color: #ff6347;
      border-radius: 50%;
      animation-name: pulse;
      animation-duration: 1s;
      animation-iteration-count: infinite;
      animation-play-state: paused;
   }
   
   @keyframes pulse {
      0% {
         transform: scale(1);
      }
      50% {
         transform: scale(1.8);
      }
      100% {
         transform: scale(1);
      }
   }
</style>
</head>
<body>
   <div class="circle-demo"></div>
</body>
</html>

CSS animation-play-state - Both States

  • In the following example, the animation-play-state property controls whether the animation is actively running or paused by default.

  • Initially set to paused, the animation stays static until hovered over, triggering the state change to running.

  • It allows the animation to commence and the circle to pulsate with a scaling effect when the cursor hovers over it.

<html>
<head>
<style>
   body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 250px;
      margin: 0;
      background-color: #f0f0f0;
   }
   .circle-demo {
      width: 100px;
      height: 100px;
      background-color: #ff6347;
      border-radius: 50%;
      animation-name: pulse;
      animation-duration: 1s;
      animation-iteration-count: infinite;
      animation-play-state: paused;
   }
   .circle-demo:hover {
      animation-play-state: running;
      }
      @keyframes pulse {
      0% {
      transform: scale(1);
      }
      50% {
      transform: scale(1.8);
      }
      100% {
      transform: scale(1);
      }
   }
</style>
</head>
<body>
<div class="circle-demo"></div>
</body>
</html>
Advertisements