initial commit

1 files changed, 205 insertions, 0 deletions

diff --git a/files/zh-cn/web/api/element/animate/index.html b/files/zh-cn/web/api/element/animate/index.html
new file mode 100644
index 0000000000..aa5efc7d61
--- /dev/null
+++ b/files/zh-cn/web/api/element/animate/index.html
@@ -0,0 +1,205 @@
+---
+title: Element.animate()
+slug: Web/API/Element/animate
+tags:
+  - js动画
+  - 动画
+  - 动画接口
+translation_of: Web/API/Element/animate
+---
+<div>{{APIRef('Web Animations')}} {{SeeCompatTable}}</div>
+
+<p>{{domxref("Element")}} 接口的<strong><code>animate()</code></strong> 方法是一个创建新{{domxref("Animation")}}的便捷方法，将它应用于元素，然后运行动画。它将返回一个新建的 {{domxref("Animation")}} 对象实例</p>
+
+<div class="note">
+<p>一个元素上可以应用多个动画效果。你可以通过调用此函数获得这些动画效果的一个列表： {{domxref("Element.getAnimations()")}}.</p>
+</div>
+
+<h2 id="语法">语法</h2>
+
+<pre class="syntaxbox">var <em>animation</em> = element.animate(<em>keyframes</em>, <em>options</em>); </pre>
+
+<h3 id="参数">参数</h3>
+
+<dl>
+ <dt><code>keyframes 关键帧</code></dt>
+ <dd>
+ <p>一个对象，代表关键帧的一个集合</p>
+ </dd>
+ <dt><code>options 可选项</code></dt>
+ <dd><strong>代表动画持续时间的整形数字</strong> (以毫秒为单位), 或者一个包含一个或多个时间属性的对象：</dd>
+ <dd>
+ <dl>
+  <dt><code>id {{optional_inline}}</code></dt>
+  <dd>在 <code>animate()里可作为唯一标识的属性</code>: 一个用来引用动画的字符串（ <a href="https://developer.mozilla.org/en-US/docs/Web/API/DOMString" title="DOMString is a UTF-16 String. As JavaScript already uses such strings, DOMString is mapped directly to a String."><code>DOMString</code></a> ）</dd>
+ </dl>
+ {{Page("/en-US/docs/Web/API/Web_Animations_API/Animation_timing_properties", "Properties")}}</dd>
+</dl>
+
+<h4 id="未来的可选项">未来的可选项</h4>
+
+<p>下面的可选项目前并非在所有地方都可用，但未来将会被加进来</p>
+
+<dl>
+ <dt><code>composite {{optional_inline}} 合成</code></dt>
+ <dd>决定动画彼此之间的值如何结合起来, 单独的动画不指定自己的特定复合操作。 默认为 <code>replace</code>.
+ <ul>
+  <li><code>add</code> 表示追加影响,每一次连续的迭代建立在前一个的基础上。 比如<code>transform</code>, <code>translateX(-200px)</code> 将不会覆盖 <code>rotate(20deg)</code> 的值，最终结果是 <code>translateX(-200px) rotate(20deg)</code></li>
+  <li><code>accumulate</code> 效果类似但是更智能一些: <code>blur(2)</code> 和<code>blur(5)</code> 的结果为<code>blur(7)</code>, 而不是 <code>blur(2) blur(5)</code></li>
+  <li><code>replace</code> 新的值将会覆盖掉旧的</li>
+ </ul>
+ </dd>
+ <dt><code>iterationComposite {{optional_inline}} 迭代合成 </code></dt>
+ <dd>决定动画迭代之间的值如何结合起来， 可以被设置为 <code>accumulate</code> 或者 <code>replace</code> （同上）。默认值为 <code>replace</code>.</dd>
+ <dt><code>spacing {{optional_inline}}</code></dt>
+ <dd>决定在动画持续时间内如何分配没有时间偏移的关键帧. 默认值为<code>distribute</code>.
+ <ul>
+  <li><code>distribute</code> 分配的关键帧位置，使连续关键帧之间的距离相等。也就是说，没有任何偏移时，将会使关键帧均匀分到整个运行时间内</li>
+  <li><code>paced</code> 分配的关键帧位置，使连续关键帧之间的距离让某个步增的属性值的增长速度相同，也就是说，属性值差异越大，关键帧之间的距离越远</li>
+ </ul>
+
+ <p><img alt="" src="https://w3c.github.io/web-animations/img/spacing-distribute.svg" style="height: 210px; width: 200px;"> <img alt=" " src="https://w3c.github.io/web-animations/img/spacing-paced.svg" style="height: 210px; width: 200px;"></p>
+ </dd>
+</dl>
+
+<h3 id="返回值">返回值</h3>
+
+<p>返回 {{domxref("Animation")}}.</p>
+
+<h2 id="示例">示例</h2>
+
+<p>在示例 <a href="https://codepen.io/rachelnabors/pen/rxpmJL/?editors=0010">Down the Rabbit Hole (with the Web Animation API)</a> 中, 我们用 <code>animate()</code> 来快速创建并运行使 <code>#tunnel</code> 元素无限循环缓慢升起的动画。注意关键帧的对象数组和时间可选项</p>
+
+<pre class="brush: js">document.getElementById("tunnel").animate([
+  // keyframes
+  { transform: 'translateY(0px)' },
+  { transform: 'translateY(-300px)' }
+], {
+  // timing options
+  duration: 1000,
+  iterations: Infinity
+});
+</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', '#the-animatable-interface', 'animate()' )}}</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>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome("36")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("48.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>23</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>id</code> option</td>
+   <td>{{CompatChrome(50.0)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("48.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>37</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>composite</code>, <code>iterationComposite</code>, and <code>spacing</code> options</td>
+   <td>{{CompatNo}}</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>Android Webview</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(39.0)}}</td>
+   <td>{{CompatChrome(39.0)}}</td>
+   <td>{{ CompatGeckoMobile("48.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>id</code> option</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(50.0)}}</td>
+   <td>{{CompatChrome(50.0)}}</td>
+   <td>{{ CompatGeckoMobile("48.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>composite</code>, <code>iterationComposite</code>, and <code>spacing</code> options</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="更多">更多</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a></li>
+ <li>{{domxref("Element.getAnimations()")}}</li>
+ <li>{{domxref("Animation")}}</li>
+</ul>