How to pause/play animation using CSS ? - GeeksforGeeks

06 Apr, 2021
CSS helps to animate HTML elements without using JavaScript. You can play and pause the animation applied to HTML elements using animation-play-state property of CSS.
paused – Pauses an ongoing animation.
running – Starts a paused animation (default value).
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.
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.
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.
HTML
<!DOCTYPE html><html>  <head>    <style>        div {            position: relative;            animation: geeks 5s infinite;            animation-play-state: paused;        }                  div:hover {            animation-play-state: running;        }                  @keyframes geeks {            from {                left: 0px;            }            to {                left: 100px;            }        }    </style></head>  <body>    <p>        Hover over the GeeksforGeeks         to run the animation.    </p>      <div>GeeksforGeeks</div></body>  </html>
Output:
Play animation when hovered
Example 2: HTML and CSS code to pause the animation.
HTML
<!DOCTYPE html><html>  <head>    <style>        div {            position: relative;            animation: geeks 5s infinite;        }                  div:hover {            animation-play-state: paused;        }                  @keyframes geeks {            from {                left: 0px;            }            to {                left: 100px;            }        }    </style></head>  <body>    <p>        Hover over the GeeksforGeeks         to stop the animation.    </p>      <div>GeeksforGeeks</div></body>  </html>
Output:
Pause animation when hovered
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
CSS-Properties
CSS-Questions
HTML-Questions
HTML-Tags
Picked
CSS
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Design a web page using HTML and CSS
How to set space between the flexbox ?
Form validation using jQuery
Search Bar using HTML, CSS and JavaScript
How to style a checkbox using CSS?
How to set the default value for an HTML <select> element ?
Hide or show elements in HTML using display property
How to set input type date in dd-mm-yyyy format using HTML ?
REST API (Introduction)
How to Insert Form Data into Database using PHP ?