The animation-play-state
property in CSS controls whether an animation is running or paused. It allows you to start or stop an animation dynamically without altering the animation's keyframes or other properties. This property is useful for controlling animations based on user interactions, such as clicking a button to start or pause an animation.
Syntax
element {
animation-play-state: state;
}
state
: Defines the play state of the animation. It can be one of the following values:running
paused
Values
running
:- The animation is currently running. It plays according to the defined
@keyframes
and any other animation properties set.
animation-play-state: running;
- The animation is currently running. It plays according to the defined
paused
:- The animation is paused. It will not progress until the
animation-play-state
is set back torunning
.
animation-play-state: paused;
- The animation is paused. It will not progress until the
Example
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>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-name: move;
animation-duration: 4s;
animation-play-state: paused;
}
.box.running {
animation-play-state: running;
}
</style>
</head>
<body>
<div class="box" id="animateBox"></div>
<button onclick="toggleAnimation()">Toggle Animation</button>
<script>
function toggleAnimation() {
const box = document.getElementById('animateBox');
if (box.classList.contains('running')) {
box.classList.remove('running');
box.style.animationPlayState = 'paused';
} else {
box.classList.add('running');
box.style.animationPlayState = 'running';
}
}
</script>
</body>
</html>
Explanation:
@keyframes move
:- Defines an animation that moves the element from
0px
to200px
horizontally.
- Defines an animation that moves the element from
.box
:- The element has an animation named
move
with a duration of 4 seconds. - The
animation-play-state
is initially set topaused
, so the animation does not play until explicitly started.
- The element has an animation named
.box.running
:- When the class
running
is added, theanimation-play-state
changes torunning
, causing the animation to start.
- When the class
JavaScript Function:
- The
toggleAnimation
function toggles the animation's play state betweenpaused
andrunning
when the button is clicked.
- The
Important Points
Default Value:
- The default value for
animation-play-state
isrunning
. If not explicitly set, animations will play normally.
- The default value for
Interaction with Other Animation Properties:
- The
animation-play-state
property affects whether the animation is actively running or paused, but it does not change the animation's duration, delay, iteration count, or keyframes.
- The
Control via JavaScript:
- The property can be dynamically controlled using JavaScript to provide interactive experiences, such as pausing animations on user interaction or resuming them based on events.
No Effect on Animation State:
- When paused, the animation retains its state as of the last frame before being paused. It does not restart from the beginning when resumed.