How to solve the playback, pause and restart of animation by css3

This article mainly introduces "css3 how to solve animation playback, pause and restart" related knowledge, editor through the actual case to show you the operation process, the method of operation is simple and fast, practical, I hope that this "css3 how to solve animation playback, pause and restart" article can help you solve the problem.

one。 The essence of the solution, the idea of playing the solution.

First define the animation effect to achieve the appearance of the style by increasing the class name.

The solution of suspension

When we play the animation, if we want to pause the animation, we need to use the property animation-play-state. The animation-play-state property has two values:

Paused: pauses the animation; running: resumes the animation

Of course, without animation-play-state, you can continue to play the animation.

Start the solution again.

The solution to play and restart

Take multiple class names for the element, delete and replace the class name

Note: you cannot delete and add the same class name here, and the animation should have the same effect and different animation names. Otherwise, the animation effect cannot be reset.

two。 Demo code

Playback pause restart @ keyframes mymove {0% {margin-left: 0px;} 50% {margin-left: 400px;} 100% {margin-left: 0px;}} @ keyframes mymove1 {0% {margin-left: 0px;} 50% {margin-left: 400px;} 100% {margin-left: 0px }} .box {margin: 50px 0; width: 100px; height: 100px; background-color: # 5578a2;} .play {animation: mymove 5s infinite ease;} .restart {animation: mymove1 5s infinite ease;} .pause {animation-play-state: paused } var play = document.getElementById ('play'), pause = document.getElementById (' pause'), restart = document.getElementById ('restart'), text = document.getElementById (' text'), box = document.getElementById ('box'); pause.addEventListener (' click', function () {if (box.classList.contains ('play')) {box.className =' pause play box';} else {box.className = 'pause restart box') } text [XSS _ clean] = this.value;}); play.addEventListener ('click', function () {if (box.classList.contains (' play')) {box.className = 'play box';} else {box.className =' restart box';} text [XSS _ clean] = this.value;}) Restart.addEventListener ('click', function () {if (box.classList.contains (' play')) {box.className = 'restart box';} else {box.className =' play box';} text [XSS _ clean] = this.value;}); that's all for "how css3 solves the problem of animation playback, pause and restart". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.