Javascript Web动画API中的步骤

我想知道是否有一种方法可以使用web动画API一步一步地制作web动画，而不必手动声明每个帧的开始和结束偏移量。显然，您可以在CSS动画中执行此操作

---

这是用于设置精灵图纸的动画。

是的，您可以使用与CSS动画相同的方法。也就是说，您可以使用

属性指定计时函数。与CSS动画不同，您可以将其应用于整个动画或单个关键帧之间

要将其应用于整个动画，可以使用：

elem.animate（/*…关键帧…*/，{duration:1000，easing:'steps（5）}）；

或者，要应用于单个关键帧，可以使用以下方法之一：

//关键帧数组语法
动画师(
[
{不透明度：0，步骤（2）}，
{不透明度：0.5，偏移量：0.8，'steps（3）'，
{不透明度：1}，
],
{
持续时间：1000，
}
);
//对象语法
动画师(
{
不透明度：[0,0.5,1]，
偏移量：[0,0.8,1]，
放宽：[“第（2）步”，“第（3）步]，
},
{
持续时间：1000，
}
);

请注意，CSS动画只能在关键帧之间进行缓和。它不能在整个动画中进行缓和

另外，请注意，当应用于关键帧时，将从添加到的关键帧开始使用缓和，直到下一个关键帧。因此，无需向最后一个关键帧添加缓和

如果正在设置精灵图纸的动画，您可能会发现关键字很有用。Firefox和Chrome都支持它。例如，使用
步骤（5，无跳转）
查看所有五帧