
The CSS animation-play-state property defines whether the animation is running or paused.
Demo:
Click the buttons to Play/Pause the animation:
Syntax:
animation-play-state: paused|running;
paused – defines that the animation is paused.
running (default) – defines that the animation is running.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
.square {
width: 100px;
height: 100px;
background: #2a9d8f;
position: relative;
animation: move-right 4s infinite;
}
.square:hover {
animation-play-state: paused;
}
@keyframes move-right {
from {left: 0px;}
to {left: 250px;}
}
</style>
</head>
<body>
<div class="square"></div>
</body>
</html>
Output:
Hover over the square to stop the animation:
Enjoy coding!