Open In App

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

Improve
Improve
Like Article
Like
Save
Share
Report

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 variables defined by CSS developers that contain specific values to be reused throughout a document. They are set using custom property notation and are accessed using the var() function

For instance,  the –main-by-color is the custom property that is scoped for the entire web page ( :root ) and accessed like var(–main-bg-color, red) where the second argument is the default value.

:root {
 --main-bg-color : green;
}
div {
background-color : var(--main-bg-color,red)
}

Adding CSS Animations using Custom Properties: To play a CSS animation initially we need to add the animation using the @keyframes rule. But, we will add the animation with custom properties. The animation starts playing as soon as it is embedded in the element

We will understand the above concepts through examples.

Example 1: In the below code example, we will make a simple animation of a slide. we are adding, –animn , –animdur , –animps as custom properties for animation-name , animation-duration , animation-play-state respectively. infinite as the iteration count, 3s as duration & alternate as the animation direction.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>
        How to Play and Pause CSS Animations 
        using CSS Custom Properties ?
    </title>
    <style>
        .block{
         background-color: tomato;
          padding : 10px;
          width : 200px;
          text-align: center;
          --anim : slide; 
          --animdur : 3s;
          --animps : running;
         animation: var(--animn, slide) 
                       var(--animdur, 0s) 0s infinite alternate 
                       var(--animps,running);
        }
         @keyframes slide {
           from { margin-left: 0%; }
           to { margin-left: calc(100% - 250px); }
          }
          
    </style>
</head>
  
<body>
    <h1 style="color:green">GeeksForGeeks</h1>
    <h3>How to Play and Pause CSS Animations 
        using CSS Custom Properties ?
    </h3>
    <div class="block">I Am Moving</div>
</body>
  
</html>


Output: The tomato color box is sliding after we added the animation as shown in the code above. Now, you can toggle the same animation using the custom properties and the :checked pseudo-class.

 

Toggling (play/pause) the CSS animations: We can toggle the animations in two ways :

  • By changing the animation duration
  • By using animation-play-state

We will understand both approaches for toggling the CSS Animations sequentially & will know their implementation through the examples.

By changing the animation duration: In this method, you simply change the value of animation to zero to pause and some positive value to play

Approach: The following approach will be utilized to change the animation duration:

  • Create an <div> element and style it with CSS
  • Select the <div> and add an animation property with duration 0s through a custom variable (animation-duration)
  • Create some animation as shown in the below example
  • Add a radio button to the document
  • Add a pseudo-class :checked to the radio button and with that add a property where you are changing the custom variable from 0s to some positive value
  • Now you can toggle the animation with the radio button

Example 2: In this example (which is the same as above), we have used the :checked pseudo-class to toggle the animation. Also, we are changing the –animdur between 0s to 3s to toggle the sliding of the element.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>
        How to Play and Pause CSS Animations 
        using CSS Custom Properties ?
    </title>
    <style>
        input[type]:checked ~ .block{
          --animdur : 3s;
        
         .block{
          background-color: tomato;
           padding : 10px;
           width : 200px;
           text-align: center;
           --anim : slide; 
           --animdur : 0s;
          animation: var(--animn, slide) 
                     var(--animdur, 0s) 0s infinite alternate;
         }
         @keyframes slide {
            from { margin-left: 0%; }
            to { margin-left: calc(100% - 250px); }
        }
    </style>
</head>
  
<body>
    <h1 style="color:green">GeeksForGeeks</h1>
    <h3>
          How to Play and Pause CSS Animations 
        using CSS Custom Properties ?
    </h3>
    <input type="checkbox" />
    <div class="block">I Am Moving</div>
</body>
  
</html>


Output: This method does not retain the position of the element which is moving, use the second method to do the actual animation. 

 

By using animation-play-state: You can use the CSS property animation-play-state to toggle between the state of the animation.

Approach: The following approach will be utilized for the animation-play-state:

  • Create a <div/> element and style it with CSS
  • Select the <div/> and add an animation property with the paused state through a custom variable (animation-play-state)
  • Create some animation as shown in the below example
  • Add a radio button to the document
  • Add a pseudo-class :checked to the radio button and with that add a property where you are changing the custom variable from paused to running
  • Now you can toggle the animation with the radio button

Example 3: In this example(which is the same as above), we have used the :checked pseudo-class to toggle the animation. –animps is the important custom property that accepts two values [paused / running] that are used to toggle animation. On check of the checkbox, the animation-play-state is changed to running.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>
        How to Play and Pause CSS Animations
        using CSS Custom Properties ?
    </title>
    <style>
        input[type]:checked ~ .block{
          --animps : running;
        
         .block{
          background-color: tomato;
           padding : 10px;
           width : 200px;
           text-align: center;
           --anim : slide; 
           --animps : paused;
          animation: var(--animn, slide) 3s 0s infinite alternate 
                     var(--animps,paused);
         }
         @keyframes slide {
            from { margin-left: 0%; }
            to { margin-left: calc(100% - 250px); }
        }        
    </style>
</head>
  
<body>
    <h1 style="color:green">GeeksForGeeks</h1>
    <h3>
        How to Play and Pause CSS Animations 
        using CSS Custom Properties ?
    </h3>
    <input type="checkbox" />
    <div class="block">I Am Moving</div>
</body>
  
</html>


Output:

 



Last Updated : 08 Nov, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads