什么是Web Animation API?
Web Animation API 提供了一个接口，允许使用JS来创建Animation对象，并用其来控制元素的动画表现。
在了解WEB动画API之前，让我们重温一下大家也许更熟悉的CSS的animation属性。
各位前端工程师在制作WEB元素动画的时候，或多或少都会使用过CSS 的 animation属性，比如我们需要让一个元素从白色渐变到黑色并不断循环，用CSS的做法大致如下：
首先定义@keyframes
@keyframes white2black {
0% {
background: white }
100% {
background: black }
}
如上代码中我们定义了一个名为white2black的keyframes，将他运用到我们需要的元素上，只需要在样式表中为我们需要的设置animation属性：
div {
width: 200px;
height: 200px;
animation: red2black 2s infinite linear;
}
就能很简单的实现一个元素从白色渐变到黑色并不断循环的效果。
那如果用Web Animation API 来实现要怎么做呢？
使用此API与使用CSS动画有许多相似的地方。使用动画API同样也需要keyframes，不过形式有些许不同。
const kfs = [
{
'background': 'white'},
{
'background': 'black'},
];
可以发现在脚本中定义的keyframes，可以不需要指定百分比，因为API会根据keyframes的数量平均分配到指定的百分比，如果在white和balck之间还有一个{'background': 'blue'}，那么blue的关键帧会被自动放在50%的位置，如果需要自己指定，那么则可以指定属性offest，比如{'background': 'blue', offset: 0.7}，那么和在CSS中设置 70%是一样的。
定义好keyframes，接下来我们需要将他运用到指定的元素之上，假设我们有一个id="div"的Element。
let div = document.getElementById('div');
div.animate(kfs,{
duration: 2000, iterations: Infinity});
这样就能很简单的实现和CSS一样的效果，不过值得一提的是，CSS默认的timing-function是ease，而WAAPI则是linear。
有人可能会说，那这样为什么我不用CSS来实现，而需要WAAPI呢。主要是WAAPI提供了许多方便控制动画的方法。
div.animate 方法会返回一个Animation对象实例，其中有许多方法是很实用的。
- Animation.cancel() 清除此动画的所有keyframeEffects，并中止播放。
- Animation.finish() 设置动画中止播放。
- Animation.pause() 暂停播放动画。
- Animation.play() 开始或恢复播放动画，或者如果之前完成，则重新开始动画。
- Animation.reverse() 反转播放动画，直到播放到动画开始时停止。 如果动画完成或未播放，它将从头到尾播放。
以及好用的回调函数：
- Animation.oncancel 获取并设置取消事件的事件处理程序。
- Animation.onfinish 获取并设置完成事件的事件处理程序。
实战：点击后元素抖动消失
现在产品有一个需求，需要提示框在点击确认或者取消之后，先抖动一下，然后缩小消失。那么我们就可以用WAAPI来实现。
我们先简单的设计一个提示框出来。
<!-- HTML 部分-->
<body>
<div id="block" class="dialog block">
<div class="title">提示的内容</div>
<button class="btn">确认&l
最低0.47元/天 解锁文章
281
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
