Playing and Pausing CSS Animations with Custom Properties

How to Play and Pause CSS Animations with CSS Custom Properties

Animations can transform a page from dull and static to dynamic and engaging. But sometimes you need to pause or play an animation without restarting it. With the help of CSS custom properties (CSS variables), you can easily control your animations.

CSS custom properties are powerful tools and allow you to store information that can be accessed later in the same style sheet, or in other style sheets. We can use them to store a Boolean value that determines whether an animation is playing or paused.

Step 1: Declare the Variable

First, you must declare the variable. You do this by adding the “--” prefix to your variable name. You can name your variable anything you want, but it is best practice to keep your naming conventions consistent throughout all of your style sheets. Declare the variable within the element you would like to animate and give it a value of either “true” or “false”.

element { --animation-status: false; }

Step 2: Add the Animation

Next, add the animation which will be controlled by the new variable. You can use any type of animation you would like, such as a scale transform, a hover effect, etc. Make sure you use the animation-play-state property and set it to the custom property you just declared.

element { 
  --animation-status: false; 
  animation-play-state: var(--animation-status); 
}

Step 3: Control The Animation

Now, you can easily control the animation using the variable’s value. You can change the custom property’s value from true to false or vice versa at any time to either start or pause the animation.

element { 
  --animation-status: true; 
  animation-play-state: var(--animation-status); 
}

You can also make use of JavaScript to toggle the value of the custom property and thereby start and stop the animation.

element.style.setProperty('--animation-status', !this._animationEnabled);

Conclusion

Using CSS custom properties, you can easily control your animations and decide when they start, stop, or pause. This can be extremely useful when creating complex animations for your websites.