Tutorial on using css to implement pause and play functions of css animation

CSS is a language that defines style structures such as fonts, colors, positions, etc., and is used to describe the way information on web pages is formatted and displayed. CSS styles can be stored directly in HTML web pages or in separate style sheet files. Either way, a style sheet contains rules for applying styles to elements of a specified type. In this section, we will share with you a tutorial on using CSS to implement the pause and play functions of CSS animations.

We know that in CSS3 animation, there is such a property that can pause and play animation:

{ 
   animation-play-state: paused | running; 
 }

animation-play-state: The property defines whether an animation is running or paused. You can query it to determine if the animation is running. Additionally, its value can be set to pause and resume the replay of the animation.

With the help of Javascript, we can control the running and playback of CSS animations. Some key codes are listed below:

<div class="btn">stop</div>  <div class="animation"></div> 
 <style>  .animation {      animation: move 2s linear infinite alternate;  } 
  @keyframes move {      0% {          transform: translate(-100px, 0);      }  
      100% {          transform: translate(100px, 0);      }  }
        </style> document.querySelector(&#39;.btn&#39;).addEventListener(&#39;click&#39;, function() 
        {      let btn = document.querySelector(&#39;.btn&#39;);      let elem = document.querySelector(&#39;.animation&#39;);  
            let state = elem.style[&#39;animationPlayState&#39;];            if(state === &#39;paused&#39;)
             {          elem.style[&#39;animationPlayState&#39;] = &#39;running&#39;;          btn.innerText = &#39;stop&#39;;      }
              else {          elem.style[&#39;animationPlayState&#39;] = &#39;paused&#39;;          btn.innerText = &#39;play&#39;;      }        }); 
Demo — pause CSS Animation(https://codepen.io/Chokcoco/pen/GWYBdM)

Pure CSS implementation

Let’s discuss below, using Can this be achieved using pure CSS?

hover pseudo-class implementation

Use the hover pseudo-class to control the pause of the animation style when the mouse hovers over the button.

The key code is as follows:

<div class="btn stop">stop</div> 
 
<div class="animation"></div> 
 
<style> 
 .stop:hover ~ .animation { 
 
    animation-play-state: paused; 
 
} 
 
</style>

Demo — Pure CSS method to realize the pause and playback of CSS animation (Hover): (https://codepen.io/Chokcoco/pen/PpxKBX)

Of course, this method is not smart enough. If you release the freedom of the mouse, click once to pause and then click again to play. Are there other methods?

checked Pseudo-class implementation

The previous article "Interesting CSS Topic (8): Pure CSS Navigation Bar Tab Switching Solution" also discussed the use of radio tags The checked pseudo-class, plus the implementation of pure CSS to capture click events.

And you can control some CSS styles by using the clicked element. The implementation is as follows:

<input id="stop" type="radio" name="playAnimation" /> 
 
<input id="play" type="radio" name="playAnimation" /> 
 
<div class="box"> 
 
    <label for="stop"> 
 
        <div class="btn">stop</div> 
 
    </label> 
 
    <label for="play"> 
 
        <div class="btn">play</div> 
 
    </label> 
 
</div> 
 
<div class="animation"></div>

Part of the key CSS code:

.animation { 
 
    animation: move 2s linear infinite alternate; 
 
} 
 
  
 #stop:checked ~ .animation { 
 
    animation-play-state: paused; 
 
} 
 
  
 #play:checked ~ .animation { 
 
    animation-play-state: running; 
 
}

We hope that when the two radios #stop and #play are clicked, animation-play-state: paused will be assigned to the .animation elements respectively. Or animation-play-state: running . And only one of the two can take effect, so the two radio tags need to be given the same name attribute.

DEMO — Pure CSS method to implement pause and play of CSS animation: (https://codepen.io/Chokcoco/pen/QpJwBW)

In the above example Demo, pure CSS is implemented Method to achieve pause and play of CSS animation.

Of course, there are other methods, such as replacing radio with checkbox, or using the :target pseudo-class selector to achieve the same effect above. If you are interested, you can try it.

The above is a tutorial on how to implement the pause and play function of CSS animation using CSS. I hope it can help everyone.

Related recommendations:

html and css tutorial to create QQ Penguin

css to achieve moving cat face

css3 simple graphic drawing tutorial

The above is the detailed content of Tutorial on using css to implement pause and play functions of css animation. For more information, please follow other related articles on the PHP Chinese website!