---
title: Web Animations API
slug: Web/API/Web_Animations_API
tags:
  - web animations api
translation_of: Web/API/Web_Animations_API
---
<p>{{DefaultAPISidebar("Web Animations")}}{{ SeeCompatTable() }}</p>

<div class="summary">
<p><strong>Web Animations API </strong>允许同步和定时更改网页的呈现, 即DOM元素的动画。它通过组合两个模型来实现：时序模型 和 动画模型。</p>
</div>

<h2 id="概念和用法">概念和用法</h2>

<dl>
 <dd>Web Animations API 为浏览器和开发人员提供了一种用于描述DOM元素的动画的通用语言。要获得有关API背后的概念以及如何使用它的更多信息，请阅读<a href="/zh-CN/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API">使用Web Amimations API</a>。</dd>
</dl>

<h2 id="网页动画接口">网页动画接口</h2>

<dl>
</dl>

<dl>
 <dt>{{domxref("Animation")}}</dt>
 <dd>提供播放控制、动画节点或源的时间轴。 可以接受使用{{domxref("KeyframeEffect.KeyframeEffect")}}构造函数创建的对象作为参数。</dd>
 <dt>{{domxref("KeyframeEffect")}}</dt>
 <dd>描述动画属性的集合，调用<strong>keyframes</strong>及{{domxref("Animation Effect Timing Properties")}}。 然后可以使用 {{domxref("Animation")}} 构造函数进行播放。</dd>
 <dt>{{domxref("AnimationTimeline")}}</dt>
 <dd>表示动画的时间轴。 此接口用以定义时间轴功能（继承自{{domxref("DocumentTimeline")}}和{{domxref("future timeline")}}），并且本身不被开发人员访问。</dd>
 <dt>{{domxref("DocumentTimeline")}}</dt>
 <dd>表示动画时间轴，包括默认的{{domxref("DocumentTimeline")}}（通过{{domxref("Document.timeline")}}访问）。</dd>
 <dt>{{domxref("AnimationEffectTiming")}}</dt>
 <dd>包含{{domxref("KeyframeEffect")}}的{{domxref("KeyframeEffect.timing", "timing")}}返回的定时属性对象。 它从{{domxref("AnimationEffectTimingReadOnly")}}继承其属性，但是以非只读形式。</dd>
 <dt>{{domxref("SharedKeyframeList")}}</dt>
 <dd>表示可在{{domxref("KeyframeEffect")}}对象之间共享的关键帧序列。 通过使用该对象，多个{{domxref("KeyframeEffect")}}对象可以重用相同的关键帧，而无需支付多次解析它们的成本。</dd>
 <dt>{{domxref("AnimationEffectTimingProperties")}}</dt>
 <dd>{{domxref("Element.animate()")}}, {{domxref("KeyframeEffectReadOnly.KeyframeEffectReadOnly()")}}和 {{domxref("KeyframeEffect.KeyframeEffect()")}}的定时属性对象。</dd>
</dl>

<h2 id="扩展的其他接口">扩展的其他接口</h2>

<p>The Web Animations API 向<strong style="font-size: 14px; font-weight: 700; line-height: 1.5;">{{domxref("document")}}</strong>和<strong style="font-size: 14px; font-weight: 700; line-height: 1.5;">{{domxref("element")}} </strong>添加了一些新的功能。</p>

<h3 id="扩展到_Document_的接口">扩展到 <code>Document</code> 的接口</h3>

<dl>
 <dt>{{domxref("document.timeline")}}</dt>
 <dd><code>DocumentTimeline</code> 表示默认文档时间轴</dd>
 <dt>{{domxref("document.getAnimations()")}}</dt>
 <dd>返回当前对文档中的元素有效的{{domxref("Animation")}}对象的数组。</dd>
 <dt>
 <h3 id="扩展到_Element_的接口">扩展到 <code>Element</code> 的接口</h3>
 </dt>
 <dt>{{domxref("Element.animate()")}}</dt>
 <dd>用于在元素上创建和播放动画的快捷方式。 它返回创建的{{domxref("Animation")}}对象实例。</dd>
</dl>

<dl>
</dl>

<h2 id="Web动画只读接口">Web动画只读接口</h2>

<p>规格中包括以下接口，用于定义在多个其他位置使用的功能。 你不会在Web开发工作中直接使用这些接口，但他们能帮助库或框架作者了解这些接口如何工作，使他们的库的实现可以更有效，或者浏览器工程师寻找一个比规范提供的内容更容易的参考。</p>

<dl>
 <dt>{{domxref("AnimationEffectTimingReadOnly")}}</dt>
 <dd>A dictionary object of timing properties, which are inherited by the mutable {{domxref("AnimationEffectTiming")}} interface associated with {{domxref("KeyframeEffect")}}.</dd>
 <dt>{{domxref("AnimationEffectReadOnly")}}</dt>
 <dd>Defines current and future "Animation Effects" like {{domxref("KeyframeEffect")}}, which can be passed to {{domxref("Animation.Animation")}} objects for playing, and {{domxref("KeyframeEffectReadOnly")}} which is used by {{domxref("KeyframeEffect")}} (inherited by <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations">CSS Animations</a> and <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions">Transitions</a>).</dd>
 <dt>{{domxref("KeyframeEffectReadOnly")}}</dt>
 <dd>Describes sets of animatable properties and values that can be played using the {{domxref("Animation.Animation()")}} constructor, and which are inherited by {{domxref("KeyframeEffect")}}. </dd>
</dl>

<h2 id="规范">规范</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
  <tr>
   <td>{{SpecName('Web Animations')}}</td>
   <td>{{Spec2('Web Animations')}}</td>
   <td>Initial definition</td>
  </tr>
 </tbody>
</table>

<h2 id="浏览器支持">浏览器支持</h2>

<p>{{ CompatibilityTable() }}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari (WebKit)</th>
  </tr>
  <tr>
   <td>Basic support (Element.animate())</td>
   <td>{{ CompatChrome(36.0) }}<br>
     </td>
   <td>{{ CompatGeckoDesktop(48)}}</td>
   <td>{{ CompatNo }}</td>
   <td>
    <p>29<br>
     28 behind pref</p>
   </td>
   <td>{{ CompatNo }}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Android Webview</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>Firefox OS (Gecko)</th>
   <th>IE Phone</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
   <th>Chrome for Android</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{ CompatNo }}</td>
   <td>{{CompatChrome(42.0)}}</td>
   <td>{{ CompatGeckoMobile(48) }}</td>
   <td>{{ CompatNo }}</td>
   <td>{{ CompatNo }}</td>
   <td>{{ CompatNo }}</td>
   <td>{{ CompatNo }}</td>
   <td>{{ CompatChrome(42.0) }}</td>
  </tr>
 </tbody>
</table>
[1] 仅在Firefox 52 Nightly和Dev版本中启用。在测试版/发布版中关闭。</div>

<p> </p>

<h2 id="相关内容">相关内容</h2>

<p> </p>

<ul>
 <li><a href="/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API">Using the Web Animations API</a></li>
 <li><a href="https://mozdevs.github.io/Animation-examples/">Web Animations demos</a></li>
 <li><a href="https://github.com/web-animations/web-animations-js">Polyfill</a></li>
 <li>Firefox's current implementation: <a href="https://birtles.github.io/areweanimatedyet/">AreWeAnimatedYet</a></li>
 <li>
  <p><a href="http://codepen.io/danwilson/pen/xGBKVq">Browser support test</a></p>
 </li>
</ul>