How to pause/play animation using CSS ?

How to pause/play animation using CSS ?

Last Updated : 24 Jul, 2024

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:

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:

How to pause/play animation using CSS ?

M

meetmavani

Improve

Article Tags :

Similar Reads

How to Play and Pause CSS Animations using CSS Custom Properties ?

In this article, we will see how to control CSS animations using custom properties, along with knowing their implementation through examples.CSS Animations are the automatic transitions that can be made on the web page which lets an element change from one style to another. CSS Custom Properties are

How to make CSS Animations ?

Animation is a way using which we can create the illusion of motion by placing still images one after another in a typical format. For example, we can have a ball rising up at some instant then falling down as an animation effect. CSS provides us with some properties to control the animation effect

How to play the animation exactly two times using CSS ?

The approach of this article is to play the animation exactly two times by using the animation-iteration-count property in CSS. It is used to specify the number of times the animation will be repeated. It can specify as infinite to repeat the animation indefinitely. Syntax:animation-iteration-count:

Loading Text Animation Effect using CSS

There are a lot of animations possible in CSS and today we will look at the loading text animation. The basic idea behind the working of this animation is the application of animation delay. Every alphabet is delayed by .1s so that each alphabet animates with a little delay and give the loading anim

How to Create Border Animation using CSS?

Creating a border animation using CSS involves utilizing hover effects to dynamically alter the appearance of an element's borders when interacted with. This technique leverages CSS pseudo-elements, combined with hover selectors, to achieve animated border transformations based on user interaction.