How to use pure CSS to achieve the pause and playback effects of CSS animation? Introduction to animation-play-state property (detailed explanation)

Use pure CSS method to pause or play CSS animation. Does it seem that it should be impossible to achieve? Or even if it can be achieved, it is a very troublesome implementation method that requires a lot of CSS styles to achieve. In fact, this is not the case. In CSS3 animation, there is such a property that can pause and play animations. This chapter will introduce to youHow to use pure CSS to achieve the pause and playback effects of CSS animation? Introduction to animation-play-state property (detailed explanation). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

animation-play-state property
##

 animation-play-state: paused | running;

animation-play-state: 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:

html code:

<div class="btn">stop</div> 
<div class="animation"></div>

css code:

.animation {
    width: 100px;
    height: 100px;
    margin: 50px auto;
    background: deeppink;
    animation: move 2s linear infinite alternate;
}

@keyframes move {
    0% {
        transform: translate(-100px, 0);
    }
    100% {
        transform: translate(100px, 0);
    }
}

.btn {
    width: 50px;
    margin: 10px auto;
    text-align: center;
    border:1px solid #ddd;
    padding: 10px;
    border-radius: 5px;
    cursor:pointer;
    
    &:hover {
        background: #ddd;
        color: #333;
    }
    
    &:active {
        background: #aaa;
    }
}

js code:

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';
    }
    
});

Rendering (during playback and after stopping playback):

Pure CSS implementation

Let’s explore whether it can 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:

html code:

<div class="btn stop">stop</div> 
<div class="animation"></div>

css code:

.animation {
    width: 100px;
    height: 100px;
    margin: 50px auto;
    background: deeppink;
    animation: move 2s linear infinite alternate;
}

input {
    display: none;
}

@keyframes move {
    0% {
        transform: translate(-100px, 0);
    }
    100% {
        transform: translate(100px, 0);
    }
}

.btn {
    width: 50px;
    margin: 10px auto;
    text-align: center;
    border:1px solid #ddd;
    padding: 10px;
    border-radius: 5px;
    cursor:pointer;
    
    &:hover {
        background: #ddd;
        color: #333;
    }
    
    &:active {
        background: #aaa;
    }
}

.stop:hover ~ .animation {
    animation-play-state: paused;
}

Rendering:

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" is also As mentioned, using the checked pseudo-class of the radio tag, plus implementing pure CSS to capture click events.

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

html code:

<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>

css code:

.animation {
    width: 100px;
    height: 100px;
    margin: 50px auto;
    background: deeppink;
    animation: move 2s linear infinite alternate;
}

input {
    display: none;
}

@keyframes move {
    0% {
        transform: translate(-100px, 0);
    }
    100% {
        transform: translate(100px, 0);
    }
}

.btn {
    width: 50px;
    margin: 10px auto;
    text-align: center;
    border:1px solid #ddd;
    padding: 10px;
    border-radius: 5px;
    cursor:pointer;
    
    &:hover {
        background: #ddd;
        color: #333;
    }
    
    &:active {
        background: #aaa;
    }
}

#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, Assign animation-play-state: paused or animation-play-state: running to the .animation element respectively. And only one of the two can take effect, so the two radio tags need to be given the same name attribute.

Rendering:

In the above example, the pure CSS method is implemented to pause and play 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 the detailed content of How to use pure CSS to achieve the pause and playback effects of CSS animation? Introduction to animation-play-state property (detailed explanation). For more information, please follow other related articles on the PHP Chinese website!