CSS Adding Pauses to Infinitely Looping CSS3 Animations

In this article, we’ll show you how to add a pause effect to an infinitely looping CSS3 animation using CSS code. CSS3 animations are a powerful tool for creating eye-catching web effects with a few simple lines of code. However, in some cases, you may want to add a pause function during an animation, giving the user control over how the animation plays and stops.

Read more: CSS Tutorial

Using the animation-play-state property in CSS

To add a pause effect to a CSS3 animation, we can use the CSS animation-play-state property. This property controls the animation’s play state and has two possible values: running for running the animation normally, and paused for pausing the animation.

Here is a simple example demonstrating how to use the animation-play-state property to achieve a paused animation effect:

@keyframes move { 
0% { 
transform: translateX(0); 
} 
100% { 
transform: translateX(200px); 
} 
} 

.moving-box { 
width: 100px; 
height: 100px; 
background-color: red; 
position: relative; 
animation: move 3s infinite; 
} 

.moving-box.paused { 
animation-play-state: paused; 
} 

In the code above, we create a keyframe animation called move to move a red box from the left to the right. In the .moving-box style, we set the animation to repeat indefinitely and set its initial state to running (the default) using the animation-play-state property. We also added an additional rule to the .moving-box.paused style to set the animation’s state to paused.

To allow the user to pause and play the animation, we can add an event handler via JavaScript:

const movingBox = document.querySelector('.moving-box');

movingBox.addEventListener('click', function() {
this.classList.toggle('paused');
});

In the JavaScript code above, we select the .moving-box element and add a click event handler to it. When the user clicks the element, the paused class is added or removed, toggling the animation’s play state.

Now, we can view this example in a browser and test it. When we click the animation element, it will immediately pause or resume, giving the user some flexibility.

Summary

By using the animation-play-state property, we can easily add pause functionality to infinitely looping CSS3 animations. By adding a click event handler to the animation element, we give the user control over the animation. This simple yet effective method improves user experience and interactivity. I hope this article helps you understand the pause effect in CSS3 animations!