读者会发现，我们前面说的 requestAnimationFrame 实在是太麻烦了，又是要递归，又是要各种运算，还要考虑到各种时间，这开发难度比定时器动画都难太多了，但是 JS 动画本身又是刚需，因为 CSS 动画虽然很丝滑，但是完全应付不了复杂场景，于是 Animation API 就应运而生了。
这个 AnimationAPI 用起来非常非常简单，一点一点来。
首先，我们要让一个元素执行一个动画，相当于就是在元素上添加一个动画，在元素上添加动画的方式就是调用元素上的 animate 方法，这个方法第一个参数是一个数组，这个数组的每一项就是一个对象，对象存储的就是 CSS 的关键帧信息，每一个对象中不仅存放了关键帧信息，还有一个特别的 offset属性，这个属性为一个数字，取值从 0 到 1，对应了 CSS 关键帧中的 0%到 100%。第二个参数传入的就是动画配置对象，配置对象有以下参数可选：
- duration (可选): 动画的持续时间，以毫秒为单位。这个属性用于定义动画从开始到结束所需的时间长度。默认值为 0，即瞬时变换。
- easing (可选): 缓动函数，用于定义动画的速度曲线。缓动函数控制动画在整个持续时间内的速度变化。可以是一个字符串，如 "linear"、"ease-in"、"ease-out" 等，也可以是自定义的 cubic-bezier 函数。不同的缓动函数会导致不同的动画效果，从线性过渡到弹簧效果等。
- delay (可选): 动画开始之前的延迟时间，以毫秒为单位。这个属性允许您延迟动画的开始，以实现需要等待一段时间后才开始的效果。默认值为 0，即立即开始。
- iterations (可选): 动画的重复次数，可以是一个数字或字符串。默认值为 1，表示动画只执行一次。如果设置为 "infinite"，则动画将无限重复。
- direction (可选): 动画的播放方向。可以是 "normal"（正向播放）、"reverse"（反向播放）、"alternate"（正向反向交替播放）或"alternate-reverse"（反向正向交替播放）。这决定了动画是正向还是反向播放，以及是否交替播放。
- fill (可选): 动画结束后是否保持最终状态。可以是 "none"（不保持）、"forwards"（保持最终状态）、"backwards"（保持初始状态）或"both"（同时保持初始和最终状态）。这个属性控制动画结束后元素的状态。
- playBackRate (可选)：设置动画的播放速率
同时我们可以通过 animation 对象上的
playBackRate属性来动态设置它的运动速度。
如果读者学习过 CSS 的动画，这里应该非常简单。
当我们元素调用这个 animate 方法创建了一个动画之后，会给我们返回一个动画对象，这个动画对象上的方法就可以让我们很灵活地控制动画，主要有以下方法
- animation.play (): 开始或继续动画。
- animation.pause (): 暂停动画。
- animation.cancel (): 取消动画。
- animation.finish (): 立即完成动画。
- animation.reverse (): 反向播放动画。
- animation. currentTime: 获取或设置动画的当前时间
接下来最后一个问题，很多时候动画结束了我都想干一些事情，也就是说一定也有一些事件来监听这些动画是否结束，所以动画对象上也有以下几个事件供我们使用
- animation. onfinish: 在动画完成时触发。
- animation. oncancel: 在取消动画时触发。
- animation. onremove: 在动画被移除时触发。
了解了以上内容，我们现在就可以很轻松地实现动画
js
const box = document.querySelector('.box');
const animation = box.animate([
{
backgroundColor: "red",
left: "0px",
offset:0
},
{
backgroundColor: "green",
left: "200px",
offset:0.5
},
{
backgroundColor: "blue",
left: "500px",
offset:1
}
], {
duration: 10000,
fill: "both"
});
animation.play();