The animation-play-state CSS property is a powerful tool for controlling the playback of your animations. It allows you to dynamically pause and resume animations, creating more interactive and engaging user experiences. This property accepts two values: running (the default) and paused.
Example 1: Basic Play and Pause on Hover
/* The element we will animate */
.box {
width: 100px;
height: 100px;
background-color: #3498db;
animation-name: spin;
animation-duration: 4s;
animation-iteration-count: infinite;
animation-timing-function: linear;
/* The animation is running by default */
animation-play-state: running;
}
/* Pause the animation when the user hovers over the box */
.box:hover {
animation-play-state: paused;
}
/* Defines the animation keyframes */
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
Explanation: This code creates a blue box that spins continuously. When you hover your mouse over the box, the animation-play-state is set to paused, and the spinning stops until you move your mouse away.
Example 2: Paused by Default, Play on Hover
/* The element to be animated */
.pulse {
width: 80px;
height: 80px;
background-color: #e74c3c;
border-radius: 50%;
animation-name: pulse-effect;
animation-duration: 2s;
animation-iteration-count: infinite;
/* The animation starts in a paused state */
animation-play-state: paused;
}
/* Run the animation on hover */
.pulse:hover {
animation-play-state: running;
}
/* Defines the pulsing keyframes */
@keyframes pulse-effect {
0% {
transform: scale(1);
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
Explanation: In this example, the red circle's pulsing animation is initially paused. The animation only plays when the user's cursor is over the element, making it an effective interactive feedback mechanism.
Example 3: Toggle Play/Pause with a Checkbox
/* The container for our animation */
.scene {
width: 200px;
height: 100px;
perspective: 600px;
}
/* The animated element */
.card {
width: 100%;
height: 100%;
transform-style: preserve-3d;
animation: flip 5s infinite linear;
animation-play-state: paused; /* Start paused */
}
/* Play the animation when the checkbox is checked */
#toggle:checked ~ .scene .card {
animation-play-state: running;
}
/* Defines the 3D flip keyframes */
@keyframes flip {
from {
transform: rotateY(0deg);
}
to {
transform: rotateY(360deg);
}
}
Explanation: This demonstrates controlling animations without JavaScript. A hidden checkbox acts as a switch; when checked, it uses the general sibling combinator (~) to target the .card and set its animation-play-state to running.
Example 4: Play Animation on :active State
/* A button-like element */
.press-me {
padding: 15px 30px;
background-color: #2ecc71;
color: white;
text-align: center;
cursor: pointer;
animation: press-effect 0.5s;
animation-play-state: paused; /* Initially paused */
}
/* Play the animation only when the element is being clicked */
.press-me:active {
animation-play-state: running;
}
/* Defines the press effect keyframes */
@keyframes press-effect {
from {
transform: scale(1);
}
to {
transform: scale(0.9);
}
}
Explanation: The press-effect animation is set to paused. It only plays when the user actively clicks on the .press-me element, providing immediate visual feedback for the user's action.
Example 5: Multiple Animations with Different Play States
/* The element with multiple animations */
.mover {
width: 50px;
height: 50px;
background: #9b59b6;
position: relative;
/* Define two animations */
animation-name: slide, change-color;
animation-duration: 4s, 8s;
animation-iteration-count: infinite, infinite;
/* Set play-state for each animation respectively */
animation-play-state: running, paused;
}
/* On hover, pause the first animation and run the second */
.mover:hover {
animation-play-state: paused, running;
}
@keyframes slide {
0% { left: 0; }
50% { left: 200px; }
100% { left: 0; }
}
@keyframes change-color {
from { background-color: #9b59b6; }
to { background-color: #f1c40f; }
}
Explanation: This example applies two separate animations. The slide animation runs by default, while change-color is paused. Hovering over the element reverses these states, pausing the slide and starting the color change.
Example 6: Using Media Queries to Pause Animations
/* A decorative, animated background element */
.background-swirl {
width: 100%;
height: 200px;
background: linear-gradient(45deg, #ff00cc, #333399);
animation: gradient-flow 10s infinite alternate;
}
/* Keyframes for the flowing gradient */
@keyframes gradient-flow {
from { background-position: 0% 50%; }
to { background-position: 100% 50%; }
}
/* Pause the animation for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
.background-swirl {
animation-play-state: paused;
}
}
Explanation: This code respects user accessibility preferences. If a user has enabled the "prefers-reduced-motion" setting in their system, the background gradient animation will be automatically paused.
Example 7: Focusing an Input to Play an Animation
/* An input field */
.search-bar {
border: 2px solid #ccc;
padding: 10px;
transition: all 0.3s;
animation: glow 2s infinite;
animation-play-state: paused; /* Animation is paused */
}
/* Play the glowing animation when the input is focused */
.search-bar:focus {
outline: none;
animation-play-state: running;
}
/* Defines the glowing border effect */
@keyframes glow {
0% { box-shadow: 0 0 3px #ccc; }
50% { box-shadow: 0 0 15px #3498db; }
100% { box-shadow: 0 0 3px #ccc; }
}
Explanation: The glowing border animation on the search bar is paused until the user clicks into the input field to start typing. This focus-based interaction draws attention to the active element.