Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
CSS animation-play-state property
The CSS animation-play-state property controls whether an animation is currently running or paused. This property is particularly useful for creating interactive animations that can be controlled dynamically.
Syntax
selector {
animation-play-state: running | paused;
}
Possible Values
| Value | Description |
|---|---|
running |
The animation is currently running (default value) |
paused |
The animation is paused |
Example: Paused Animation
The following example shows an animation that is set to paused state −
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 150px;
height: 80px;
position: relative;
background: red;
color: white;
display: flex;
align-items: center;
justify-content: center;
animation-name: slide;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-play-state: paused;
}
@keyframes slide {
0% { left: 0px; background-color: red; }
50% { left: 200px; background-color: blue; }
100% { left: 0px; background-color: green; }
}
</style>
</head>
<body>
<div class="box">Paused</div>
</body>
</html>
A red box with "Paused" text remains stationary at the starting position because the animation is paused.
Example: Running Animation
Here's the same animation with animation-play-state set to running −
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 150px;
height: 80px;
position: relative;
background: red;
color: white;
display: flex;
align-items: center;
justify-content: center;
animation-name: slide;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-play-state: running;
}
@keyframes slide {
0% { left: 0px; background-color: red; }
50% { left: 200px; background-color: blue; }
100% { left: 0px; background-color: green; }
}
</style>
</head>
<body>
<div class="box">Running</div>
</body>
</html>
A box continuously slides left and right while changing colors from red to blue to green in a 3-second loop.
Conclusion
The animation-play-state property provides simple control over animation playback. Use paused to freeze animations and running to start or resume them, making it ideal for interactive user experiences.
Updated on: 2026-03-15T12:43:32+05:30
82 Views
Advertisements