Element.animate()

Element 接口的animate() 方法是一个创建新Animation的便捷方法，将它应用于元素，然后运行动画。它将返回一个新建的 Animation 对象实例

var animation = element.animate(keyframes, options); 

keyframes 关键帧

一个对象，代表关键帧的一个集合

options 可选项

代表动画持续时间的整形数字 (以毫秒为单位), 或者一个包含一个或多个时间属性的对象：

id 可选

在 animate()里可作为唯一标识的属性: 一个用来引用动画的字符串（ DOMString ）

{{Page("/en-US/docs/Web/API/Web_Animations_API/Animation_timing_properties", "Properties")}}

未来的可选项

下面的可选项目前并非在所有地方都可用，但未来将会被加进来

composite 可选 合成

决定动画彼此之间的值如何结合起来, 单独的动画不指定自己的特定复合操作。 默认为 replace.

• add 表示追加影响,每一次连续的迭代建立在前一个的基础上。 比如transform, translateX(-200px) 将不会覆盖 rotate(20deg) 的值，最终结果是 translateX(-200px) rotate(20deg)
• accumulate 效果类似但是更智能一些: blur(2) 和blur(5) 的结果为blur(7), 而不是 blur(2) blur(5)
• replace 新的值将会覆盖掉旧的

iterationComposite 可选 迭代合成 

决定动画迭代之间的值如何结合起来， 可以被设置为 accumulate 或者 replace （同上）。默认值为 replace.

spacing 可选

决定在动画持续时间内如何分配没有时间偏移的关键帧. 默认值为distribute.

• distribute 分配的关键帧位置，使连续关键帧之间的距离相等。也就是说，没有任何偏移时，将会使关键帧均匀分到整个运行时间内
• paced 分配的关键帧位置，使连续关键帧之间的距离让某个步增的属性值的增长速度相同，也就是说，属性值差异越大，关键帧之间的距离越远

 

返回 Animation.

在示例 Down the Rabbit Hole (with the Web Animation API) 中, 我们用 animate() 来快速创建并运行使 #tunnel 元素无限循环缓慢升起的动画。注意关键帧的对象数组和时间可选项

document.getElementById("tunnel").animate([
  // keyframes
  { transform: 'translateY(0px)' },
  { transform: 'translateY(-300px)' }
], {
  // timing options
  duration: 1000,
  iterations: Infinity
});

• Web Animations API
• Element.getAnimations() (en-US)
• Animation