Element.animate() - Web API 接口参考 编辑

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

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

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

语法

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

参数

keyframes 关键帧

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

options 可选项

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

id 可选

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

delay Optional

The number of milliseconds to delay the start of the animation. Defaults to 0.

direction Optional

Whether the animation runs forwards (normal), backwards (reverse), switches direction after each iteration (alternate), or runs backwards and switches direction after each iteration (alternate-reverse). Defaults to "normal".

duration Optional

The number of milliseconds each iteration of the animation takes to complete. Defaults to 0. Although this is technically optional, keep in mind that your animation will not run if this value is 0.

easing Optional

The rate of the animation's change over time. Accepts the pre-defined values "linear", "ease", "ease-in", "ease-out", and "ease-in-out", or a custom "cubic-bezier" value like "cubic-bezier(0.42, 0, 0.58, 1)". Defaults to "linear".

endDelay Optional

The number of milliseconds to delay after the end of an animation. This is primarily of use when sequencing animations based on the end time of another animation. Defaults to 0. 

fill Optional

Dictates whether the animation's effects should be reflected by the element(s) prior to playing ("backwards"), retained after the animation has completed playing ("forwards"), or both. Defaults to "none".

iterationStart Optional

Describes at what point in the iteration the animation should start. 0.5 would indicate starting halfway through the first iteration for example, and with this value set, an animation with 2 iterations would end halfway through a third iteration. Defaults to 0.0.

iterations Optional

The number of times the animation should repeat. Defaults to 1, and can also take a value of Infinity to make it repeat for as long as the element exists.

未来的可选项

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

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

浏览器兼容性

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

• Desktop
• Mobile

Feature	Chrome	Edge	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
Basic support	36	未实现	48.0 (48.0)	未实现	23	?
id option	50.0	未实现	48.0 (48.0)	未实现	37	?
composite, iterationComposite, and spacing options	未实现	未实现	未实现	未实现	未实现	未实现

Feature	Android	Android Webview	Chrome for Android	Firefox Mobile (Gecko)	Firefox OS	IE Mobile	Opera Mobile	Safari Mobile
Basic support	?	39.0	39.0	48.0 (48.0)	?	?	?	?
id option	未实现	50.0	50.0	48.0 (48.0)	?	?	?	?
composite, iterationComposite, and spacing options	未实现	未实现	未实现	未实现	未实现	未实现	未实现	未实现

更多

• Web Animations API
• Element.getAnimations()
• Animation