Front-end Tutorials

Front-end Tutorials

HTMLCSSSassJavaScriptReactJS
CMS Tutorials

CMS Tutorials

WordPress
Tutorials expand

CSS Properties

CSS animation-play-state Property

Posted in CSS Tutorial
Updated on Oct 01, 2024
By Mari Selvan
👁️ 9 - Views
⏳ 4 mins
💬 1 Comment
CSS animation-play-state Property

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
Copy To Clipboard
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

ValueDescription
runningThe animation plays normally.
pausedThe 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
Copy To Clipboard
<!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.

👨‍💻 Join our Community:

To get interesting news and instant updates on Front-End, Back-End, CMS and other Frameworks. Please Join the Telegram Channel:

Author

author
👋 Hey, I'm Mari Selvan

For over eight years, I worked as a full-stack web developer. Now, I have chosen my profession as a full-time blogger at codetofun.com.

Buy me a coffee to make codetofun.com free for everyone.

Buy me a Coffee

Share Your Findings to All

Subscribe
Notify of
guest
1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
We make use of cookies to improve our user experience. By using this website, you agree with our Cookies Policy
AgreeCookie Policy