Shulou(Shulou.com)05/31 Report--

In this article, the editor introduces in detail "how to use CSS to control animation marching". The content is detailed, the steps are clear, and the details are handled properly. I hope this "how to use CSS to control animation marching" article can help you solve your doubts.

Disassemble analysis requirements

The effect of animation control is:

After the page render, without any action, the animation will not start. Animation begins only when the mouse click the element and triggers the: active pseudo-class effect of the element.

The animation stops when the mouse is clicked at any time.

Click on the element again, and the animation continues to start at the end of the previous frame

If the animation is finished, clicking again will not repeat the playback, and the animation state will remain in the last frame of the animation.

Solve the demand

It seems complicated, but it's actually easy to implement, mainly with the help of pseudo-classes: active and animation playback state animation-play-state.

Let's take a moving ball to do a simple example, the ball moves from left to right.

Div {margin: 50px auto; width: 100px; height: 100px; background: # 000; animation: move 1s linear; animation-fill-mode: forwards;} @ keyframes move {100% {transform: translate (200px, 0) rotate (180deg);}}

Next, we will make a simple modification, and the default state of the animation is paused:

Div {margin: 50px auto; width: 100px; height: 100px; background: # 000; animation: move 1s linear; animation-fill-mode: forwards; + animation-play-state: paused;}

The animation runs only when you click:

Body:active div {animation-play-state: running;}

Look at the effect, in order to see the click process clearly, in the click process, I also changed the background color (background color indicates the current mouse press):

Read here, this article "how to use CSS to control animation progress" article has been introduced, want to master the knowledge of this article also need to practice and use in order to understand, if you want to know more related articles, welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.