Web Animation API Tutorial 3: Multiple animations

Reprinted from Http://www.w3cplus.com/css3/web-animations-api-tutorial-part-3-multiple-animations.html

After the discussion about Animationplayer and the timeline, let's take a look at multiple animations and more player .

Add multiple animations to an element

In this example, each rectangle is applied with three animations (including transformations, transparency, and colors). You can give multiple calls to an element animate() , like a multi-animation in CSS.

CSS to use:

#toAnimate {  animation: pulse 1s, activate 3000ms, have-fun-with-it 2.5s;}@keyframes pulse { /* ... */ }@keyframes activate { /* ... */ }@keyframes have-fun-with-it { /* ... */ }

Using the Web Animation API:

var animated = document.getElementById(‘toAnimate‘);var pulseKeyframes, //定义关键帧变量    activateKeyframes,    haveFunKeyframes;var pulse = animated.animate(pulseKeyframes, 1000); //第二个参数是持续时间的有效简写var activate = animated.animate(activateKeyframes, 3000);var haveFunWithIt = animated.animate(haveFunKeyframes, 2500);

Using the Web Animation API, it can create three AnimationPlayer , each of which can be paused, played, ended, canceled, or controlled through the timeline or playback rate.

Get AnimationPlayers

So you've started an animation and are playing it, but when you call a animate() function on an element, you don't get a reference to it AnimationPlayer . What should I do now?

The Web Animation API creates the default timeline and uses it directly as a document's properties: document.timeline . It is currently available only in Firefox nightly and Polyfill. There is a lot of content about this piece, but let's look at a specific method first.

var players = document.timeline.getAnimations();//返回所有有效动画的数组（不是finished也不是canceled的）

In the Codepen example, you will see that these points are moving at random durations, delays, and infinitely long transformations. The "Pause all" button invokes the getAnimations() function, iterates over all the returned player , and then pauses them one after another.

Try to edit the Codepen, iterations change the value from Infinity 1 , then let the animation play, and then press the pause button. You will find getAnimations() no return player . This is because all animations are already finished , this method only returns running/pause the state of the animation.

Next

In the next article, we'll look at different ways to create a waapi animation (because it's not only element.animate possible to create animations). Tip: document.timeline you will often appear.

Web Animation API Tutorial 3: Multiple animations