Open In App
Related Articles

How to pause/play animation using CSS ?

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

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.

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:
    1. Specify the position property for<div>tag.
    2. Use the animation property to mention the animation you want to give to the <div>tag.
    3. Use the animation-play-state property to play/pause the animation.
    4. Mention the keyframes propertiesfrom’ 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



Last Updated : 06 Apr, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads