From my blog, ryougifujino.com.

Original Address (MDN)

CSS Animations make it possible to create incredible Animations on documents and applications. However, some of the things you want to achieve may not be so obvious, or you can’t easily come up with a smart way to accomplish them. This article contains a series of tips and tricks to make your job easier, including how to get a stopped animation running again.

Get the animation running again

The CSS Animations specification does not provide a way to get Animations running again. There is no magic method for elements, requestAnimation(), even if you set the animation-play-state to “running”. You have to use a clever technique to get the animation that has been stopped to play back.

We will introduce to you a method which we think is sufficiently stable and reliable.

HTML content

First, let’s create a

to perform the animation and a button to play (or play back) the animation. 
<div class="box">
</div>

<div class="runButton">Click me to run the animation</div>

Copy the code

CSS content

Now let’s define the animation itself in CSS. Some non-essential CSS (such as the style of the play button itself) will not appear here for the sake of brevity.

@keyframes colorchange {
  0% { background: yellow }
  100% { background: blue }
}

.box {
  width: 100px;
  height: 100px;
  border: 1px solid black;
}

.changing {
  animation: colorchange 2s;
}
Copy the code

There are two classes.” The box” class is the basic description of the box’s appearance and does not contain any animation information. The animation details are contained in the “Changing” class, which describes how a @keyFrames called Colorchange will be used in a 2-second animation on the box.

JavaScript content

Next we’ll take a look at what JavaScript does. The core of this technology lies in the play() function, which is called back when the user clicks the “Run” button.

function play() {
  document.querySelector(".box").className = "box";
  window.requestAnimationFrame(function(time) {
    window.requestAnimationFrame(function(time) {
      document.querySelector(".box").className = "box changing";
    });
  });
}
Copy the code

It really seems strange, doesn’t it? This is because the only way to play the animation again is to remove the animation effect, have the document recalculate so that it knows you’ve removed it, and then add the animation effect back to the element. In order for this to happen, we have to be creative.

Here’s what happens when the play() method is called:

  1. The boxclassBe reset to"box". This action removes all other classes currently in use on the box, including those that handle animations"changing"The class. In other words, we’re removing the animation from the box. However, changes to the class list do not take effect until the style recalculation is complete, or until a refresh to reflect the change occurs.
  2. To ensure that the style has been recalculated, we usewindow.requestAnimationFrame()To specify a callback. Our callback will then be executed before the next redraw of the document. The problem is that since it was before the redrawing, the recalculation of the style hasn’t actually happened yet! So…
  3. Our callback is cleverly called a second timerequestAnimationFrame()! This time, the callback runs before the next redraw, when the first redraw has been completed, so you can ensure that the style recalculation has occurred. This callback is going to bechangingThe class is added back to the box so that the animation will start again after the redraw.

Of course, we also need to add an event handler to our “Run” button:

document.querySelector(".runButton").addEventListener("click", play, false);
Copy the code

To stop the animation

Simply removing the animation-name applied to the element causes the element to jump to its next state. If you want to stop the animation when it’s finished, you may want to try a different approach. The main techniques are as follows:

  1. Make your animations as independent as possible. It means you shouldn’t rely onanimation-direction: alternate. Instead, you should explicitly write a KeyFrame animation to simulate the process.
  2. inanimationiterationWhen the event occurs, use JavaScript to clean up the animation that is being used.

The following demo shows how to implement the above JavaScript technology:

.slidein {
  animation-duration: 5s;
  animation-name: slidein;
  animation-iteration-count: infinite;
}

.stopped {
  animation-name: none;
}

@keyframes slidein {
  0% {
    margin-left: 0%;
  }
  50% {
    margin-left: 50%;
  }
  100% {
    margin-left: 0%; }}Copy the code
<h1 id="watchme">Click me to stop</h1>
Copy the code
let watchme = document.getElementById('watchme')

watchme.className = 'slidein'
const listener = (e) = > {
  watchme.className = 'slidein stopped'
}
watchme.addEventListener('click'.() = >
  watchme.addEventListener('animationiteration', listener, false))Copy the code

The Demo address

Updated on Mar 23, 2019, 6:23:51 PM. Some of the live demo cannot be linked to, please go to the original article to check.