initial commit

11 files changed, 1224 insertions, 0 deletions

diff --git a/files/zh-cn/web/api/animation/animation/index.html b/files/zh-cn/web/api/animation/animation/index.html
new file mode 100644
index 0000000000..178bd25fcb
--- /dev/null
+++ b/files/zh-cn/web/api/animation/animation/index.html
@@ -0,0 +1,106 @@
+---
+title: Animation.Animation()
+slug: Web/API/Animation/Animation
+translation_of: Web/API/Animation/Animation
+---
+<p>{{ SeeCompatTable() }}{{ APIRef("Web Animations API") }}</p>
+
+<p>Animation构造函数返回一个新的Animation对象实例。</p>
+
+<h2 id="语法">语法</h2>
+
+<div class="syntaxbox">
+<pre class="brush: js">var animation = new Animation(effect, timeline);</pre>
+</div>
+
+<h3 id="参数">参数</h3>
+
+<dl>
+ <dt>effect {{optional_inline}}</dt>
+ <dd>将{{domxref("KeyframeEffect")}}对象分配给动画。（在将来，其他类型的效果，如SequenceEffects或GroupEffects是可能被实现的，但现在，唯一的效果是KeyframeEffect。）</dd>
+ <dt>timeline {{optional_inline}}</dt>
+ <dd>指定与动画关联的时间轴。 （目前唯一可用的时间轴类型是{{domxref("DocumentTimeline")}}，但在将来我会有与手势或滚动相关联的时间轴。）默认为{{domxref("Document.timeline")}}。 这也可以设置为null。</dd>
+</dl>
+
+<h2 id="例子">例子</h2>
+
+<p>在<a href="http://codepen.io/rachelnabors/pen/eJyWzm/?editors=0010">White Rabbit</a>示例中，Animation构造函数用于使用文档时间轴为兔子创建关键帧动画：</p>
+
+<pre class="brush: js">var rabbitDownAnimation = new Animation(rabbitDownKeyframes, document.timeline);
+</pre>
+
+<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', '#dom-animation-animation', 'animation()' )}}</td>
+   <td>{{Spec2('Web Animations')}}</td>
+   <td>Editor's draft.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器支持">浏览器支持</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<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</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop(48)}} [1]</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</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>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile(48)}} [1]</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1]  {{domxref("KeyframeEffect")}} 和 {{domxref("DocumentTimeline")}} 接口目前在发行版本中是关闭的, 所以目前无法使用.</p>
+
+<h2 id="相关内容">相关内容</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a></li>
+ <li>{{domxref("Animation")}}</li>
+</ul>
diff --git a/files/zh-cn/web/api/animation/cancel/index.html b/files/zh-cn/web/api/animation/cancel/index.html
new file mode 100644
index 0000000000..768e63f5fe
--- /dev/null
+++ b/files/zh-cn/web/api/animation/cancel/index.html
@@ -0,0 +1,112 @@
+---
+title: Animation.cancel()
+slug: Web/API/Animation/cancel
+tags:
+  - Animation.cancel()
+translation_of: Web/API/Animation/cancel
+---
+<p>{{ SeeCompatTable() }}{{ APIRef("Web Animations") }}</p>
+
+<p>{{domxref("Animation")}} 接口的 Web动画API的 <code><strong>cancel()</strong></code> 方法将清除此动画造成的所有{{domxref("KeyframeEffect")}} ,并中止其播放。.</p>
+
+<div class="note">
+<p>当一个动画被取消时，其  {{domxref("Animation.startTime", "startTime")}}  和{{domxref("Animation.currentTime", "currentTime")}} 被设置为null。</p>
+</div>
+
+<h2 id="语法">语法</h2>
+
+<pre class="syntaxbox"><em>Animation</em>.cancel();</pre>
+
+<h3 id="参数">参数</h3>
+
+<p>无.</p>
+
+<h3 id="返回值">返回值</h3>
+
+<p>无.</p>
+
+<h3 id="异常">异常</h3>
+
+<p>这个方法不会直接抛出异常; 但是，如果动画的 {{domxref("Animation.playState", "playState")}} 取消时是除了“空闲”之外的任何东西，{{domxref("Animation.finished", "current finished promise", "", 1)}} 被拒绝与一个 {{domxref("DOMException")}} 命名的<code>AbortError</code>.</p>
+
+<dl>
+</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', '#dom-animation-cancel', 'Animation.cancel()' )}}</td>
+   <td>{{Spec2('Web Animations')}}</td>
+   <td>Editor's draft.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容">浏览器兼容</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<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</td>
+   <td>{{CompatChrome(39.0)}}</td>
+   <td>{{CompatGeckoDesktop(48)}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</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>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(48)}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] The Web Animations API is only enabled by default in Firefox Developer Edition and Nightly builds. You can enable it in beta and release builds by setting the preference <code>dom.animations-api.core.enabled</code> to <code>true</code>, and can disable it in any Firefox version by setting this preference to <code>false</code>.</p>
+
+<h2 id="相关内容" style="line-height: 30px; font-size: 2.14285714285714rem;">相关内容</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a></li>
+ <li>{{domxref("KeyframeEffect")}}</li>
+ <li>{{domxref("Animation")}}</li>
+ <li>{{domxref("Animation.playState")}}</li>
+ <li>{{domxref("Animation.finished")}} returns the promise this action will reject if the animation's <code>playState</code> is not <code>"idle"</code>.</li>
+</ul>
diff --git a/files/zh-cn/web/api/animation/currenttime/index.html b/files/zh-cn/web/api/animation/currenttime/index.html
new file mode 100644
index 0000000000..25c3ca441d
--- /dev/null
+++ b/files/zh-cn/web/api/animation/currenttime/index.html
@@ -0,0 +1,114 @@
+---
+title: Animation.currentTime
+slug: Web/API/Animation/currentTime
+tags:
+  - 动画
+translation_of: Web/API/Animation/currentTime
+---
+<p>{{APIRef("Web Animations API")}}{{SeeCompatTable}}</p>
+
+<p>Animation.currentTime属性返回或设置动画的当前时间值（以毫秒为单位），无论动画正在运行还是已暂停。</p>
+
+<p>如果动画缺少{{domxref("AnimationTimeline", "timeline")}}，处于非活动状态或尚未播放，则当前时间返回值为null。</p>
+
+<h2 id="语法">语法</h2>
+
+<pre class="syntaxbox">var <em>currentTime</em> = element.currentTime;
+element.currentTime =<em> someValue;</em></pre>
+
+<h3 id="值">值</h3>
+
+<p>表示当前时间的数字（以毫秒为单位），或为null。</p>
+
+<h2 id="例子">例子</h2>
+
+<p>在<a href="http://codepen.io/rachelnabors/pen/PNYGZQ?editors=0010">Drink Me/Eat Me game</a>中，爱丽丝的高度是可变动的，所以它可以从小到大或从大到小。 在游戏开始时，通过将她的动画的currentTime设置为她的keyframeEffect的持续时间的一半让她的高度设置在两个极端之间：</p>
+
+<pre class="brush: js">aliceChange<strong>.currentTime</strong> = aliceChange.effect.timing.duration / 2;</pre>
+
+<p>寻求动画的50％标记的更通用的方法：</p>
+
+<pre class="brush: js">animation.currentTime =
+  animation.effect.getComputedTiming().delay +
+  animation.effect.getComputedTiming().activeDuration / 2;</pre>
+
+<h2 id="规范">规范</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">规范</th>
+   <th scope="col">状态</th>
+   <th scope="col">说明</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Animations', '#dom-animation-currenttime', 'currentTime')}}</td>
+   <td>{{Spec2("Web Animations")}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器支持">浏览器支持</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<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</td>
+   <td>{{CompatChrome(39.0)}}</td>
+   <td>{{CompatGeckoDesktop(48)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</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>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(39.0)}}</td>
+   <td>{{CompatGeckoMobile(48)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(39.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p> </p>
+
+<h2 id="相关内容" style="line-height: 30px; font-size: 2.14285714285714rem;">相关内容</h2>
+
+<ul>
+ <li>{{domxref("Animation")}} for other methods and properties you can use to control web page animation.</li>
+ <li>{{domxref("Animation.startTime")}} for the time an animation is scheduled to start.</li>
+ <li><a href="/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a></li>
+</ul>
diff --git a/files/zh-cn/web/api/animation/effect/index.html b/files/zh-cn/web/api/animation/effect/index.html
new file mode 100644
index 0000000000..4061f383e9
--- /dev/null
+++ b/files/zh-cn/web/api/animation/effect/index.html
@@ -0,0 +1,100 @@
+---
+title: Animation.effect
+slug: Web/API/Animation/effect
+translation_of: Web/API/Animation/effect
+---
+<p>{{ SeeCompatTable() }} {{ APIRef("Web Animations API") }}</p>
+
+<p>Animation.effect属性可以获取或设置动画的目标效果。 目标效果可以是{{domxref("KeyframeEffect")}}对象或null。</p>
+
+<h2 id="语法">语法</h2>
+
+<div class="syntaxbox">
+<pre class="brush: js">// Get an Animation object's target effect
+var effect = animation.effect;
+
+// Set an Animation's target effect
+animation.effect = new KeyframeEffect({ opacity: [ 1, 0 ] }, 300);
+</pre>
+</div>
+
+<h3 id="值">值</h3>
+
+<p>{{domxref("KeyframeEffect")}}对象或null.</p>
+
+<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', '#dom-animation-effect', 'Animation.effect' )}}</td>
+   <td>{{Spec2('Web Animations')}}</td>
+   <td>Editor's draft.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器支持">浏览器支持</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<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</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</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>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p> </p>
+
+<h2 id="相关内容" style="line-height: 30px; font-size: 2.14285714285714rem;">相关内容</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/KeyframeEffect">KeyframeEffect</a></li>
+ <li><a href="/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a></li>
+ <li>{{domxref("Animation")}}</li>
+</ul>
diff --git a/files/zh-cn/web/api/animation/finish/index.html b/files/zh-cn/web/api/animation/finish/index.html
new file mode 100644
index 0000000000..527c8f78ce
--- /dev/null
+++ b/files/zh-cn/web/api/animation/finish/index.html
@@ -0,0 +1,97 @@
+---
+title: Animation.finish()
+slug: Web/API/Animation/finish
+tags:
+  - API
+  - Animation
+  - Finish
+  - Interface
+  - Methos
+  - Web Animations
+translation_of: Web/API/Animation/finish
+---
+<p>{{APIRef("Web Animations")}}{{SeeCompatTable}}</p>
+
+<div>
+<p><span class="seoSummary">The <strong><code>finish()</code> </strong>method of the <a href="/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a>'s {{domxref("Animation")}} Interface sets the current playback time to the end of the animation corresponding to the current playback direction.</span> That is, if the animation is playing forward, it sets the playback time to the length of the animation sequence, and if the animation is playing in reverse (having had its {{domxref("Animation.reverse", "reverse()")}} method called), it sets the playback time to 0.</p>
+</div>
+
+<h2 id="语法">语法</h2>
+
+<pre class="syntaxbox"><em>Animation</em>.finish(); </pre>
+
+<h3 id="参数">参数</h3>
+
+<p>None.</p>
+
+<h3 id="返回值">返回值</h3>
+
+<p>None.</p>
+
+<dl>
+</dl>
+
+<h3 id="异常">异常</h3>
+
+<dl>
+ <dt><code>InvalidState</code></dt>
+ <dd>The player's playback rate is 0 or the animation's playback rate is greater than 0 and the end time of the animation is infinity.</dd>
+</dl>
+
+<h2 id="例子"><strong>例子</strong></h2>
+
+<p>The following example shows how to use the <code>finish()</code> method and catch an <code>InvalidState</code> error.</p>
+
+<pre class="brush: js">interfaceElement.addEventListener("mousedown", function() {
+  try {
+    player.finish();
+  } catch(e if e instanceof InvalidState) {
+    console.log("finish() called on paused or finished animation.");
+  } catch(e);
+    logMyErrors(e); //pass exception object to error handler
+  }
+});
+</pre>
+
+<p>The following example finishes all the animations on a single element, regardless of their direction of playback.</p>
+
+<pre class="brush: js">elem.getAnimations().forEach(
+  function(animation){
+    return animation.finish();
+  }
+);
+</pre>
+
+<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', '#dom-animation-finish', 'finish()')}}</td>
+   <td>{{Spec2("Web Animations")}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+<div>
+
+
+<p>{{Compat("api.Animation.finish")}}</p>
+</div>
+
+<h2 id="更多参考" style="line-height: 30px; font-size: 2.14285714285714rem;">更多参考</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a></li>
+ <li>{{domxref("Animation")}} for other methods and properties you can use to control web page animation.</li>
+ <li>{{domxref("Animation.play()")}} to play an animation forward.</li>
+ <li>{{domxref("Animation.reverse()")}} to play an animation backward.</li>
+</ul>
diff --git a/files/zh-cn/web/api/animation/finished/index.html b/files/zh-cn/web/api/animation/finished/index.html
new file mode 100644
index 0000000000..b94e2d2d9b
--- /dev/null
+++ b/files/zh-cn/web/api/animation/finished/index.html
@@ -0,0 +1,116 @@
+---
+title: Animation.finished
+slug: Web/API/Animation/finished
+translation_of: Web/API/Animation/finished
+---
+<p>{{ SeeCompatTable() }}{{ APIRef("Web Animations API") }}</p>
+
+<p>Animation.finished只读属性允许您返回动画的完成状态。</p>
+
+<div class="note">
+<p><strong>Note</strong>: The Promise is replaced with a new (pending) Promise object every time the animation leaves the <code>finished</code> play state.</p>
+</div>
+
+<h2 id="语法">语法</h2>
+
+<div class="syntaxbox">
+<pre class="brush: js">var animationsPromise = animation<em>.finished</em>;
+</pre>
+</div>
+
+<h3 id="值">值</h3>
+
+<p>一个Promise对象。</p>
+
+<h2 id="例子">例子</h2>
+
+<p>以下代码会等到所有动画都完成，然后再移除它们处于活动状态的元素：</p>
+
+<pre class="brush: js">Promise.all(
+  elem.getAnimations().map(
+    function(animation) {
+      return animation.finished
+    }
+  )
+).then(
+  function() {
+    return elem.remove();
+  }
+);</pre>
+
+<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', '#dom-animation-finished', 'Animation.finished' )}}</td>
+   <td>{{Spec2('Web Animations')}}</td>
+   <td>Editor's draft.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器支持">浏览器支持</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<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</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</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>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p> </p>
+
+<h2 id="相关内容" style="line-height: 30px; font-size: 2.14285714285714rem;">相关内容</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/KeyframeEffect">KeyframeEffect Interface</a></li>
+ <li><a href="/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a></li>
+ <li>{{domxref("Animation")}}</li>
+</ul>
diff --git a/files/zh-cn/web/api/animation/id/index.html b/files/zh-cn/web/api/animation/id/index.html
new file mode 100644
index 0000000000..29e267b854
--- /dev/null
+++ b/files/zh-cn/web/api/animation/id/index.html
@@ -0,0 +1,109 @@
+---
+title: Animation.id
+slug: Web/API/Animation/id
+tags:
+  - 动画
+translation_of: Web/API/Animation/id
+---
+<p>{{ SeeCompatTable() }}{{ APIRef("Web Animations API") }}</p>
+
+<p><a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a> 的 <code><strong>Animation</strong></code><strong><code>.id </code></strong>属性可返回或设置用于识别某个动画的唯一标识.</p>
+
+<h2 id="获取与设置_animation.id">获取与设置 <code>animation.<em>id</em></code></h2>
+
+<div class="syntaxbox">
+<pre class="brush: js">// 获取动画的 id
+var animationsId = animation.<em>id</em>;
+
+// 设置动画的 id
+animation.<em>id</em> = "newId";
+</pre>
+</div>
+
+<h2 id="返回值">返回值</h2>
+
+<p>当该动画已被分配 id, 返回一个 {{domxref("DOMString")}}, 当该动画未被分配 id 则返回 null.</p>
+
+<h2 id="示例">示例</h2>
+
+<p>在 <a href="http://codepen.io/rachelnabors/pen/eJyWzm?editors=0010">Follow the White Rabbit example</a> 这个例子里, 你可以像下面的方式一样,为 <code>rabbitDownAnimation</code> 分配一个 id:</p>
+
+<pre class="brush: js">rabbitDownAnimation.effect.<em>id</em> = "rabbitGo";
+</pre>
+
+<h2 id="规范">规范</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">规范</th>
+   <th scope="col">状态</th>
+   <th scope="col">说明</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Animations', '#dom-animation-id', 'Animation.id' )}}</td>
+   <td>{{Spec2('Web Animations')}}</td>
+   <td>Editor's draft.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器支持">浏览器支持</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<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</td>
+   <td>{{CompatChrome(39.0)}}</td>
+   <td>{{CompatGeckoDesktop(48)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</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>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(48)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p> </p>
+
+<h2 id="相关文档" style="line-height: 30px; font-size: 2.14285714285714rem;">相关文档</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/KeyframeEffect">KeyframeEffect Interface</a></li>
+ <li><a href="/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a></li>
+ <li>{{domxref("Animation")}}</li>
+</ul>
diff --git a/files/zh-cn/web/api/animation/index.html b/files/zh-cn/web/api/animation/index.html
new file mode 100644
index 0000000000..0db1e9496b
--- /dev/null
+++ b/files/zh-cn/web/api/animation/index.html
@@ -0,0 +1,112 @@
+---
+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>
diff --git a/files/zh-cn/web/api/animation/oncancel/index.html b/files/zh-cn/web/api/animation/oncancel/index.html
new file mode 100644
index 0000000000..00e9b0fc98
--- /dev/null
+++ b/files/zh-cn/web/api/animation/oncancel/index.html
@@ -0,0 +1,111 @@
+---
+title: Animation.oncancel
+slug: Web/API/Animation/oncancel
+tags:
+  - API
+  - Animation
+translation_of: Web/API/Animation/oncancel
+---
+<p>{{ SeeCompatTable() }}{{ APIRef("Web Animations") }}</p>
+
+<p><a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a> 的 {{domxref("Animation")}} 接口的 <code><strong>oncancel</strong></code> 属性是 {{event("cancel")}} 事件的事件处理程序。</p>
+
+<p>当动作从其他状态进入 <code>"idle"</code> 播放状态，例如当动画在结束播放后从元素中移除时，<code>cancel</code> 事件可以 {{domxref("Animation.cancel()")}} 被手动触发。 </p>
+
+<div class="note">
+<p>在新的动画中，创建一个新的初始的空闲动画不会触发 {{event("cancel")}} 事件。</p>
+</div>
+
+<h2 id="语法">语法</h2>
+
+<pre class="syntaxbox">var <em>cancelHandler</em> = <em>Animation</em>.oncancel;
+
+<em>Animation</em>.oncancel = <em>cancelHandler</em>;</pre>
+
+<h3 id="值">值</h3>
+
+<p>当动画被取消时，这个函数将会被执行。默认是 <code>null</code> 。</p>
+
+<h2 id="例子">例子</h2>
+
+<p>如果动画被取消，将会从元素中移除它。</p>
+
+<pre class="brush: js">animation.oncancel = animation.effect.target.remove();
+</pre>
+
+<h2 id="标准">标准</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">标准</th>
+   <th scope="col">状态</th>
+   <th scope="col">备注</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Animations', '#dom-animation-oncancel', 'Animation.oncancel' )}}</td>
+   <td>{{Spec2('Web Animations')}}</td>
+   <td>编辑草案中。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>功能</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>基础支持</td>
+   <td>{{CompatChrome(39.0)}}</td>
+   <td>{{CompatGeckoDesktop(48)}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>功能</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>基础支持</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(48)}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Web Animations API 默认在 Firefox Developer Edition 和 Nightly builds 被启用。你可以在设置属性 <code>dom.animations-api.core.enabled 为 true 时在 Beta 和 发行版 开启这个功能，</code>你可以设置为 <code>false </code>来禁用这个功能。</p>
+
+<h2 id="参见" style="line-height: 30px; font-size: 2.14285714285714rem;">参见</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a></li>
+ <li>{{domxref("Animation")}}</li>
+ <li>{{event("cancel")}} 事件</li>
+</ul>
diff --git a/files/zh-cn/web/api/animation/play/index.html b/files/zh-cn/web/api/animation/play/index.html
new file mode 100644
index 0000000000..4ff52dd3c6
--- /dev/null
+++ b/files/zh-cn/web/api/animation/play/index.html
@@ -0,0 +1,91 @@
+---
+title: Animation.play()
+slug: Web/API/Animation/play
+translation_of: Web/API/Animation/play
+---
+<div>{{ APIRef("Web Animations") }}{{SeeCompatTable}}</div>
+
+<p><a href="/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a>的{{ domxref("Animation") }}接口中的<strong><code>play()</code></strong> 方法 可开始或恢复动画的播放. 如果动画结束，则调用<code>play()</code>重新启动动画，从头开始播放。</p>
+
+<h2 id="语法">语法</h2>
+
+<pre class="syntaxbox">animation.play();
+</pre>
+
+<h3 id="参数">参数</h3>
+
+<p>无.</p>
+
+<h3 id="返回值">返回值</h3>
+
+<p>{{jsxref("undefined")}}</p>
+
+<h2 id="例子">例子</h2>
+
+<p>在 <a href="http://codepen.io/rachelnabors/pen/PNYGZQ?editors=0010">Growing/Shrinking Alice Game</a> 示例中, 单击或点击蛋糕会导致Alice的增长动画 (<code>aliceChange</code>) 播放,导致她体型变大并触发蛋糕的动画。在以下示例中,使用了一个事件监听器来触发两者的动画:</p>
+
+<pre class="brush: js">// 蛋糕拥有其自己的动画:
+var nommingCake = document.getElementById('eat-me_sprite').animate(
+[
+  { transform: 'translateY(0)' },
+  { transform: 'translateY(-80%)' }
+], {
+  fill: 'forwards',
+  easing: 'steps(4, end)',
+  duration: aliceChange.effect.timing.duration / 2
+});
+
+// 暂停蛋糕的动画,以避免动画立即播放.
+nommingCake.pause();
+
+// 该函数会在用户点击时触发
+var growAlice = function() {
+
+  // Play Alice's animation.
+  aliceChange.play();
+
+  // Play the cake's animation.
+  nommingCake.play();
+
+}
+
+// 当用户持续按下或点击时, 调用 growAlice 函数使得所有的动画播放.
+cake.addEventListener("mousedown", growAlice, false);
+cake.addEventListener("touchstart", growAlice, false);
+</pre>
+
+<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', '#dom-animation-play', 'play()')}}</td>
+   <td>{{Spec2("Web Animations")}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+<div>
+
+
+<p>{{Compat("api.Animation.play")}}</p>
+</div>
+
+<h2 id="了解更多" style="line-height: 30px; font-size: 2.14285714285714rem;">了解更多</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a></li>
+ <li>{{domxref("Animation")}} for other methods and properties you can use to control web page animation.</li>
+ <li>{{domxref("Animation.pause()")}} to pause an animation.</li>
+ <li>{{domxref("Animation.reverse()")}} to play an animation backwards.</li>
+ <li>{{domxref("Animation.finish()")}} to finish an animation.</li>
+ <li>{{domxref("Animation.cancel()")}} to cancel an animation.</li>
+</ul>
diff --git a/files/zh-cn/web/api/animation/playstate/index.html b/files/zh-cn/web/api/animation/playstate/index.html
new file mode 100644
index 0000000000..b3bedac354
--- /dev/null
+++ b/files/zh-cn/web/api/animation/playstate/index.html
@@ -0,0 +1,156 @@
+---
+title: Animation.playState
+slug: Web/API/Animation/playState
+tags:
+  - Animation
+  - animation api
+  - 动画
+  - 运动状态
+translation_of: Web/API/Animation/playState
+---
+<p>{{APIRef("Web Animations")}}{{SeeCompatTable}}</p>
+
+<p>作为一个 <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a> 的属性，<code><strong>Animation</strong></code><strong><code>.playState </code></strong><code>能够返回并设置一个可枚举值来描述一个动画的回放状态。</code></p>
+
+<div class="note">
+<p>这个属性只对CSS Animations 和 Transitions可读。</p>
+</div>
+
+<h2 id="语法">语法</h2>
+
+<pre class="syntaxbox">var<em> currentPlayState</em> = <em>Animation</em>.playState;
+
+<em>Animation</em>.playState = <em>newState</em>;
+</pre>
+
+<h3 id="可能的值">可能的值</h3>
+
+<dl>
+ <dt><code>idle</code></dt>
+ <dd>动画当前的时间是无法解析的，并且队列里没有处于等待执行的任务。</dd>
+ <dt><code>pending</code></dt>
+ <dd>动画将一直等到某些等待中的任务完成方会执行。</dd>
+ <dt><code>running</code></dt>
+ <dd>动画处于正在运行状态。</dd>
+ <dt><code>paused</code></dt>
+ <dd>动画中止，并且{{domxref("Animation.currentTime")}}该项属性不会更新。</dd>
+ <dt><code>finished</code></dt>
+ <dd>动画已经达到某一临界点，并且{{domxref("Animation.currentTime")}}该项属性不会更新。</dd>
+</dl>
+
+<h2 id="实例">实例</h2>
+
+<p>在<a href="http://codepen.io/rachelnabors/pen/PNYGZQ?editors=0010">Growing/Shrinking Alice Game</a>这个例子中, 玩家们可以凭<a href="http://codepen.io/rachelnabors/pen/EPJdJx?editors=0010">Alice crying into a pool of tears</a>结束游戏。出于性能原因，游戏里，眼泪只当可见之时才能运动。因此，这些泪滴必须在下面的情况下刚好暂停运动：</p>
+
+<pre class="brush: js">// 创建泪珠动画
+
+tears.forEach(function(el) {
+  el.animate(
+    tearsFalling,
+    {
+      delay: getRandomMsRange(-1000, 1000), // 获取每一滴随机泪珠
+      duration: getRandomMsRange(2000, 6000), // 获取每一滴随机泪珠
+      iterations: Infinity,
+      easing: "cubic-bezier(0.6, 0.04, 0.98, 0.335)"
+    });
+  el.playState = 'paused';
+});
+
+
+// 结尾需要现出时播放眼泪降落动画
+
+tears.forEach(function(el) {
+  el.playState = 'playing';
+});
+
+
+// 暂停并重置正在哭泣时的泪滴动画
+
+tears.forEach(function(el) {
+  el.playState = "paused";
+  el.currentTime = 0;
+});
+</pre>
+
+<h2 id="规范">规范</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">格式</th>
+   <th scope="col">状态</th>
+   <th scope="col">注解</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Animations', '#play-state', 'playState')}}</td>
+   <td>{{Spec2("Web Animations")}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<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</td>
+   <td>{{CompatChrome(39.0)}} [1]</td>
+   <td>{{CompatGeckoDesktop(48)}}<sup>[2]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</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>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(39.0)}} [1]</td>
+   <td>{{CompatChrome(39.0)}} [1]</td>
+   <td>{{CompatGeckoMobile(48)}}<sup>[2]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] 在Chrome 50之前, <code>idle</code> 这项属性只用在还没开始的动画上，而在Chrome 50之后, 以 <code>paused显示</code>.</p>
+
+<p>[2] 默认情况下，Web Animations API 只在Firefox Developer Edition 和 Nightly builds可用。您可以在测试版和公开版的设置里通过配置偏好来启用，将<code>dom.animations-api.core.enabled</code> 设为 <code>true</code>, 然后也可在任何版本的Firefox上通过设置为<code>false来</code>禁用它。</p>
+
+<h2 id="参见">参见</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a></li>
+ <li>{{domxref("Animation")}} 获取更多可用来控制网页动画的方法和属性</li>
+ <li>{{domxref("Animation.play()")}}, {{domxref("Animation.pause()")}}, {{domxref("Animation.finish()")}}，这些方法可以设置一个动画的 <code>playState</code></li>
+</ul>