How to pause/play animation using CSS ?
The animation-play-state property has 2 values:
- paused – Pauses an ongoing animation.
- running – Starts a paused animation (default value).
Follow these steps :
- Create HTML file
- Create CSS file:
- Specify the position property for<div>tag.
- Use the animation property to mention the animation you want to give to the <div>tag.
- Use the animation-play-state property to play/pause the animation.
- Mention the keyframes properties ‘from’ and ‘to’ to mention the start and end of the animation.
Example 1: HTML and CSS code to play the animation.
Example 2: HTML and CSS code to pause the animation.
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML course.