Element.animate()

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

语法

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 API
• Element.getAnimations()
• Animation