Element.animate()
Baseline Widely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2020年3月.
* Some parts of this feature may have varying levels of support.
Element 接口的 animate() 方法是创建一个新的 Animation 的便捷方法，将它应用于元素，然后运行动画。它将返回一个新建的 Animation 对象实例
备注：一个元素上可以应用多个动画效果。你可以通过调用 Element.getAnimations() 函数获得这些动画效果的一个列表。
语法
animate(keyframes, options) 参数
keyframes-
关键帧对象数组，或一个关键帧对象（其属性为可迭代值的数组）。参见关键帧格式以了解详细信息。
options-
代表动画持续时间的整数（以毫秒为单位），或者一个包含一个或多个时间属性（在
KeyframeEffect()options 参数和下方列出）的对象：id可选-
在
animate()里可作为唯一标识的属性：一个用来引用动画的字符串。
返回值
返回 Animation。
示例
旋转和缩放
在以下示例中，我们使用 animate() 方法旋转和缩放元素。
HTML
<div class="newspaper">翻报纸真的<br />会头晕</div> CSS
html, body { height: 100%; } body { display: flex; justify-content: center; align-items: center; background-color: black; } .newspaper { padding: 0.5rem; text-transform: uppercase; text-align: center; background-color: white; cursor: pointer; } JavaScript
const newspaperSpinning = [ { transform: "rotate(0) scale(1)" }, { transform: "rotate(360deg) scale(0)" }, ]; const newspaperTiming = { duration: 2000, iterations: 1, }; const newspaper = document.querySelector(".newspaper"); newspaper.addEventListener("click", () => { newspaper.animate(newspaperSpinning, newspaperTiming); }); 结果
Down the Rabbit Hole 演示
在演示 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, }, ); 隐含关键帧
在新版的浏览器中，你可以只设置动画的开始或结束状态（即单个关键帧），如果可以，浏览器会自动推断动画的另一端（结束或开始）的状态。例如，考虑这个简单动画——关键帧对象如下所示：
let rotate360 = [{ transform: "rotate(360deg)" }]; 我们仅指定了动画的结束状态，开始状态是隐含的。
规范
| Specification |
|---|
| Web Animations # dom-animatable-animate |