Reprinted from Http://www.w3cplus.com/css3/web-animations-api-tutorial-part-1-creating-a-basic-animation.html
We've got a preliminary look at the content of the unified Web Animation API, but we haven't really explored the specifics of the specification, so let's get started.
Waapi gives you more controls than you use for CSS animations, but before we get to know them, let's start with the basics: How do I use this API to create a basic animation?
Create a keyframe animation
If you are familiar with CSS transition and animation, the following code should not look strange.
var player = document.getElementById (' Toanimate '). Animate ([{transform:' Scale (1) ', opacity:1, Offset:0}, {transform:' Scale (. 5) ', opacity:.5, offset: .3}, {transform: .667, offset: .7875}, {transform: .6, offset: 1}], {duration: 700, //milliseconds easing: ' Ease-in-out ', //' linear ', a Bézier Curve, etc delay: 10, //milliseconds iterations: Infinity, //or a number direction: ' alternate ', //' Normal ', ' reverse ', etc. Fill: ' forwards ' //' backwards ', ' both ', ' none ', ' Auto '})
For comparison purposes, create an equivalent CSS Keyframe animation
@keyframes Emphasis {0%{Transform: Scale1); Opacity: 1; }39%{Transform: Scale (.5); Opacity:.5; }78.75%{Transform: Scale (.667); Opacity:.667; }100%{Transform: Scale (.6); opacity : 6; }} #toAnimate Span class= "rules" >{animation: emphasis 700ms ease-in-out 10ms Infinite alternate forwards; } /span>
We break the code down, and we'll explain it one piece at a time.
var player = document.getElementById(‘toAnimate‘).animate()
The animation animate()
will return one to AnimationPlayer
help us do some interesting things next, so you might want to create a variable to get AnimationPlayer
the reference. Let's find the element we want to animate (we'll use it here document.getElementById
) and call the animate
function. This function is a new addition to the specification, so you need to check its support/presence before use, or introduce Polyfill.
animate
The function passes two parameters, one is an KeyframeEffects
array, and the other is an AnimationEffectTimingProperties
option. Basically the first parameter maps to what you put @keyframes
in the CSS, and the second parameter is what you will use in your CSS rules to animation-*
specify the attributes (or animation
shorthand, as I did earlier). One of the key benefits here is that we can use variables or reuse previously defined KeyframeEffects
, and with CSS we will be restricted to use only the values we have defined previously.
var player = document.getElementById ( ' Toanimate '). Animate ([{transform: 1}, {transform: .5}, {transform: .667}, {transform: .6}]);
For each keyframeeffect
, we turn the percent offset offset
in CSS into a decimal value of 0
to 1
. It is optional, and if you do not specify any values, they will be evenly distributed (so if you have three, the first offset is 0
, the second offset is . 5
, and the third is 1
). You can also specify a easing
property, which is the same as animation-timing-function
in CSS. Other properties in Keyframeeffect
are also properties that you can add animations to. The value of each property should match the one you specified in JavaScript using Element.style
, that is, the value of opacity
should be a number, and transform The
should be a string.
var player = document.getElementById(‘toAnimate‘).animate([], { duration: 700, //milliseconds easing: ‘ease-in-out‘, //‘linear‘, a bezier curve, etc. delay: 10, //milliseconds iterations: Infinity, //or a number direction: ‘alternate‘, //‘normal‘, ‘reverse‘, etc. fill: ‘forwards‘ //‘backwards‘, ‘both‘, ‘none‘, ‘auto‘ });
timing
Properties are mapped to CSS animation properties, although sometimes with different names. Earlier code examples we discussed only the main options.
The following is an example of using Polyfill (but if you are viewing it in the latest chrome, it should be implemented using a native browser). The first column of gray squares is waapi, and the second column of Red Squares uses CSS keyframes.
Next section
Now that we know how to animate the same effect based on our known CSS, let's look at animate
the object returned by the function AnimationPlayer
. This is where it really boosts the functionality of the feature.
Web Animation API Tutorial 1: Creating a basic animation