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

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!

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 未实现 未实现 未实现 未实现 未实现 未实现 未实现 未实现

更多

文档标签和贡献者

此页面的贡献者: lingziyu, codedrinker, jiangyuzhen
最后编辑者: lingziyu,