How to pause/play animation using CSS ?

Last Updated : 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.

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 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> 