Element.animate()

Experimental: 这是一个实验中的功能
此功能某些浏览器尚在开发中，请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订，所以在未来版本的浏览器中该功能的语法和行为可能随之改变。

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

一个元素上可以应用多个动画效果。你可以通过调用此函数获得这些动画效果的一个列表： Element.getAnimations() (en-US).

语法

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 animate()	Working Draft	Initial definition

浏览器兼容性

BCD tables only load in the browser

Element.animate()

语法

参数

未来的可选项

返回值

示例

规范

浏览器兼容性

更多