CSS animation-play-state Property

Posted in CSS Tutorial

Updated on Oct 01, 2024

By Mari Selvan

👁️ 18 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The animation-play-state property in CSS is used to control whether an animation is running or paused.

This property is particularly useful when you want to pause an animation at a specific point or resume it after a certain event. It can be applied to any element that has a CSS animation applied to it.

💡 Syntax

The syntax for the animation-play-state property is as follows:

Syntax

Copied

element {
  animation-play-state: state;
}

🎛️ Default Value

The default value of the animation-play-state property is running, meaning the animation plays as soon as it is applied to the element.

🏠 Property Values

Value	Description
running	The animation plays normally.
paused	The animation is paused at the current frame and will not resume until the `animation-play-state` is set back to running.

📄 Example

In this example, we'll create a simple animation and control its play state using the animation-play-state property.

index.html

Copied

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS animation-play-state Example</title>
  <style>
    @keyframes move {
      from { transform: translateX(0); }
      to { transform: translateX(200px); }
    }

    .box {
      width: 100px;
      height: 100px;
      background-color: red;
      animation: move 4s infinite;
      animation-play-state: paused;
    }

    .box:hover {
      animation-play-state: running;
    }
  </style>
</head>
<body>
  <h1>Animation Play State Example</h1>
  <div class="box"></div>
</body>
</html>

In this example, the red box will only start moving when you hover over it. The animation-play-state is initially set to paused and changes to running when the user hovers over the box.

🖥️ Browser Compatibility

The animation-play-state property is well-supported across modern browsers, including Chrome, Firefox, Safari, Edge, and Opera. Testing your animations across different browsers ensures consistent behavior for all users.

🎉 Conclusion

The animation-play-state property is a versatile tool for controlling the flow of animations on your web pages.

Whether you need to pause an animation until user interaction or resume it after an event, this property gives you the control you need to create engaging and interactive web experiences. Try experimenting with different states to see how this property can enhance your animations.