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

CSS Web Development Front End Technology

In SS, animation is an effective way to add some visual flair to the website. However, sometimes we want to have more control over when and how these animations play. Here, we will explore how to play and pause CSS animations using CSS custom properties.

Before we go ahead, we should know that CSS animations can be created using keyframes or by transitioning between two or more states.

Syntax

@keyframes animation-name {
   /* define the animation steps */
}

We define the animation by giving it a name and using the @keyframes keyword. Within the curly braces, we define the steps of the animation using percentage or keyword values.

Play and Pause Animations in CSS

In CSS, Play and pause animations refer to the ability to control the animated element. It is a way to add movement and visual interest to a website.

Play and pause animations allow us to control when and how these animations play. This can be very useful if we want to give the user the ability to pause an animation if they need to focus on.

In CSS, we can use the animation-play-state property to control whether an animation is running or paused. By default, the animation-play-state property is set to running, which means the animation will play automatically when the page loads. However, we can change the value of this property using CSS to start or stop an animation at any time.

To create a play and pause animation effect using CSS, you can follow below steps −

Step 1: Define the Animation

In the first Step, we need to define the animation that we want to control. We can create a simple animation using keyframes.

Step 2: Create the Play and Pause effect

After defining the animation, we need to create the element that will control the animation. we can use any HTML element like buttons, checkbox and hove effect.

Step 3: Define the CSS Custom Properties

Now, we need to define the CSS custom properties that will hold the animation state. We can use any name for the custom properties, but for this example, we will use --animation-play-state and --animation-timingfunction.

We will comprehend the above concepts through examples.

Example 1

Below is an example of how to create a simple animation of a slide.

<!DOCTYPE html>
<html>
<head>
   <style>
      body { text-align: center;}
      .box {
         display: flex;
         height: 80px;
         width: 80px;
         border-radius: 10%;
         color: white;
         background-color: green;
         position: relative;
         animation: my-animation 6s infinite;
      }
      .box:hover { animation-play-state: paused;}
      @keyframes my-animation {
         from {left: 0px;}
         to {left: 400px;}
      }
   </style>
</head>
   <body>
      <h2>A simple animation of a slide</h2>
      <div class="box">Mouse Hove to give me a break.</div>
   </body>
</html>

Example 2

Here is one more example of how to Play and Pause CSS Animations using CSS Custom Properties.

<!DOCTYPE html>
<html>
<head>
   <style>
      body { text-align: center; }
      .box {
         align-items: center;
         background-color: green;
         display: flex;
         height: 80px;
         width: 80px;
         margin-top: 10px;
         border-radius: 10%;
      }
      .my-slide {--animdur: 5s; --animn: slide; }
      [my-animation] {
         animation: var(--animn, none) var(--animdur, 0s) var(--animtf,
         linear) var(--animic, infinite) var(--animdir, alternate) var(--animps,
         running);
      }
      [my-animation-pause]:checked~[my-animation] {
         --animps: paused;
      }
      @keyframes slide {
         from { margin-left: 0%;}
         to {margin-left: calc(100% - 80px);}
      }
   </style>
</head>
   <body>
      <input type="checkbox" my-animation-pause id="move" class="#" />
      <label for="move" class="#">Check Me to play/paus</label>
      <div class="box my-slide" my-animation="stop"></div>
   </body>
</html>

Conclusion

Using CSS custom properties to play and pause CSS animations provides a simple and efficient way to control animations on web pages. In the first example, we used keyframe animation to define the animation and used the animation-play-state property to control its state. In the second example, we used transition animation and changed the value of a custom property to control the animation's state. Both techniques provide a way to create dynamic animations that can be easily controlled with CSS.