Using CSS to implement the pause and play function of CSS animation

CSS is a language that defines style structures such as fonts, colors, locations, etc., and is used to describe how information is formatted and realistic on a Web page. CSS styles can be stored directly on an HTML page or in a separate style sheet file. Either way, a style sheet contains rules that apply a style 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 function of CSS animations.

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

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

Animation-play-state: Property defines whether an animation is running or paused. You can query it to determine whether the animation is running. In addition, its value can be set to pause and resume the replay of the animation.

With Javascript, we can control the operation and playback of CSS animations, and some of the 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 ('. btn '). AddEventListener (' click ', function ()         {let      btn = Document.queryselector ('. btn ');      Let Elem = Document.queryselector ('. Animation ');              Let state = Elem.style[' animationplaystate '];            if (state = = = ' paused ')             {          elem.style[' animationplaystate '] = ' running ';          Btn.innertext = ' Stop ';      }              else {          elem.style[' animationplaystate '] = ' paused ';          Btn.innertext = ' play ';      }        }); Demo-pause CSS Animation (Https://codepen.io/Chokcoco/pen/GWYBdM)

Pure CSS Implementation

Below we explore, the use of pure CSS can be implemented.

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-CSS Animation pause and Play (Hover):(Https://codepen.io/Chokcoco/pen/PpxKBX)

Of course, this method is not smart enough, if you release the freedom of the mouse, click on the pause, and then click on the play is good. Is there any other way?

Checked pseudo-class implementation

Previous article "Interesting CSS topic (8): Plain CSS navigation bar tab switching Scheme" also talked about, using radio tag checked pseudo class, plus implement pure CSS capture click things.

And you can control some CSS styles with 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>

Some 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 #stop and #play two radio are clicked, the. Animation elements are given animation-play-state:paused or Animation-play-state:running respectively. And they can only take effect one, so you need to give two radio tags the same name attribute.

demo-CSS animation pause and play in a pure CSS mode: (Https://codepen.io/Chokcoco/pen/QpJwBW)

In the example above, the CSS animation is paused and played in a pure CSS way.

Of course, there are other methods, such as radio, to replace the checkbox, or use: Target pseudo-class selector can also achieve the same effect above, interested can try.

The above is the CSS way to implement the CSS animation pause and play the function of the tutorial, I hope to help everyone.