---
title: Animation
slug: Web/API/Animation
tags:
  - Animation
translation_of: Web/API/Animation
---
<p>{{ APIRef("Web Animations") }}{{SeeCompatTable}}</p>

<p><a href="/zh-CN/docs/Web/API/Web_Animations_API">Web 动画 API</a>的<strong>动画</strong>接口表示一个单个动画播放器并且提供用于一个动画节点或源的回放控制和一个时间轴。</p>

<h2 id="构造函数">构造函数</h2>

<dl>
 <dt>{{domxref("Animation.Animation()", "Animation()")}}</dt>
 <dd>创建一个新的Animation对象实例。</dd>
</dl>

<h2 id="属性">属性</h2>

<dl>
 <dt>{{domxref("Animation.currentTime")}}</dt>
 <dd>动画的当前时间值（以毫秒为单位），无论是正在运行还是已暂停。 如果动画缺少{{domxref("AnimationTimeline", "timeline")}}或尚未播放，其值为null。</dd>
</dl>

<dl>
 <dt>{{domxref("Animation.effect")}}</dt>
 <dd>获取或设置与此动画相关联的{{domxref("KeyframeEffect")}}。</dd>
 <dt>{{domxref("Animation.finished")}} {{readOnlyInline}}</dt>
 <dd>返回此动画的当前完成的状态。</dd>
</dl>

<dl>
 <dt>{{domxref("Animation.id")}}</dt>
 <dd>获取或设置用于标识动画的字符串。</dd>
</dl>

<dl>
 <dt>{{domxref("Animation.playState")}} {{readOnlyInline}}</dt>
 <dd>返回描述动画播放状态的枚举值。</dd>
</dl>

<dl>
 <dt>{{domxref("Animation.playbackRate")}}</dt>
 <dd>返回或设置动画的播放速率。</dd>
</dl>

<dl>
 <dt>{{domxref("Animation.ready")}} {{readOnlyInline}}</dt>
 <dd>返回此动画的当前就绪状态。</dd>
 <dt>{{domxref("Animation.startTime")}}</dt>
 <dd>获取或设置动画播放应开始的预定时间。</dd>
 <dt>{{domxref("Animation.timeline")}}</dt>
 <dd>获取或设置与此动画相关联的{{domxref("AnimationTimeline", "timeline")}}。</dd>
</dl>

<h3 id="事件处理程序"> 事件处理程序</h3>

<dl>
 <dt>{{domxref("Animation.oncancel")}}</dt>
 <dd>获取并设置取消事件的事件处理程序。</dd>
 <dt>{{domxref("Animation.onfinish")}}</dt>
 <dd>获取并设置完成事件的事件处理程序。</dd>
</dl>

<h2 id="方法">方法</h2>

<dl>
 <dt>{{domxref("Animation.cancel()")}}</dt>
 <dd>清除此动画的所有{{domxref("KeyframeEffect", "keyframeEffects")}}，并中止播放。</dd>
</dl>

<dl>
 <dt>{{domxref("Animation.finish()")}}</dt>
 <dd>设置动画中止播放。</dd>
</dl>

<dl>
 <dt>{{domxref("Animation.pause()")}}</dt>
 <dd>暂停播放动画。.</dd>
</dl>

<dl>
 <dt>{{domxref("Animation.play()")}}</dt>
 <dd>开始或恢复播放动画，或者如果之前完成，则重新开始动画。</dd>
</dl>

<dl>
 <dt>{{domxref("Animation.reverse()")}}</dt>
 <dd>反转播放动画，直到播放到动画开始时停止。 如果动画完成或未播放，它将从头到尾播放。</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", "#the-animation-interface", "Animation")}}</td>
   <td>{{Spec2("Web Animations")}}</td>
   <td>Initial definition</td>
  </tr>
 </tbody>
</table>

<h2 id="浏览器兼容性">浏览器兼容性</h2>

<div>{{Compat("api.Animation")}}</div>