CSS tips for controlling animation playback and pause (very practical)

Today I will introduce a very simple trick to control the playback and pause of animations using CSS. If used properly, it can be applied in many practical scenarios.

Let's take a look at an example. I saw this example while browsing Codepen. It's very interesting:

This example, CodePen: https://codepen.io/mikegolus/pen/jJzRwJ

The entire process above is completed by CSS. Let’s put aside how to use CSS to achieve some of the above UI effects. This article mainly talks about how to control the progress, pause and start of an animation using only CSS.

Deconstruction and analysis requirements

The effect to be achieved by the above animation control is:

1. After the page is rendered, the animation will not start without any operation. The animation starts only when the mouse click on the element, triggering the :active pseudo-class effect of the element;
2. At any time during the animation, if you stop clicking the mouse, the animation will stop.
3. Click the element again, and the animation continues from the state where the previous frame ended.
4. If the animation is finished, clicking again will not play it again, and the animation state will remain at the last frame of the animation.

Solving needs

It may seem complicated, but it is actually very easy to implement, mainly with the help of the pseudo-class :active and the animation play state animation-play-state .

Let's take a moving ball as an example. The ball moves from left to right.

<div></div>

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 transformation. 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 will only run when clicked:

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

Take a look at the effect. In order to make it easier to see the clicking process, I also changed the background color during the clicking process (the background color changes indicate that the mouse is currently pressed):

CodePen Demo: https://codepen.io/Chokcoco/pen/XGvwjL

To sum up

Well, the whole process is actually very simple. After understanding this method, you can add it to any animation you want. Here is a similar demo:

CodePen Demo: https://codepen.io/Chokcoco/pen/ZPgxwy

A very useful little trick, get it now.

This concludes this article about tips for controlling animation playback and pause with CSS (very practical). For more relevant content about controlling animation playback and pause with CSS, please search previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!