initial commit

1 files changed, 196 insertions, 0 deletions

diff --git a/files/zh-cn/web/api/web_animations_api/keyframe_formats/index.html b/files/zh-cn/web/api/web_animations_api/keyframe_formats/index.html
new file mode 100644
index 0000000000..d534d4a5c4
--- /dev/null
+++ b/files/zh-cn/web/api/web_animations_api/keyframe_formats/index.html
@@ -0,0 +1,196 @@
+---
+title: 关键帧(Keyframe)格式
+slug: Web/API/Web_Animations_API/Keyframe_Formats
+tags:
+  - Animation
+  - annimate
+  - 关键帧
+  - 关键帧格式
+translation_of: Web/API/Web_Animations_API/Keyframe_Formats
+---
+<p>{{ SeeCompatTable() }}{{ APIRef("Web Animations API") }}</p>
+
+<p>{{domxref("Element.animate()")}}, {{domxref("KeyframeEffect.KeyframeEffect()")}}, 和 {{domxref("KeyframeEffect.setKeyframes()")}} 都接受格式为一组关键帧的对象， 这种格式有以下几种选项。</p>
+
+<h2 id="语法">语法</h2>
+
+<div id="keyframe-syntax">
+<p>关键帧格式有两种不同的方式：</p>
+
+<ol>
+ <li>
+  <p>一个由多个关键帧的属性和值组成的对象所构成的<code>数组</code>。这是{{domxref("KeyframeEffect.getKeyframes()", "getKeyframes()")}}方法返回的规范格式。</p>
+
+  <pre class="brush: js"><em>element</em>.animate(<strong>[
+  { // from
+    opacity: 0,
+    color: "#fff"
+  },
+  { // to
+    opacity: 1,
+    color: "#000"
+  }
+]</strong>, 2000);</pre>
+
+  <p>对每个关键帧的偏移可以通过提供一个<code>offset</code>来指定。</p>
+
+  <pre class="brush: js"><em>element</em>.animate(<strong>[ { opacity: 1 },
+                  { opacity: 0.1, offset: 0.7 },
+                  { opacity: 0 } ]</strong>,
+                2000);
+</pre>
+
+  <div class="note">
+  <p><strong>提示</strong>: <code>offset</code> 的值必须是在<strong>[0.0, 1.0]</strong>这个区间内，且须升序排列。</p>
+  </div>
+
+  <p>并非所有的关键帧都需要设置<code>offset</code>。 没有指定<code>offset</code>的关键帧将与相邻的关键帧均匀间隔。</p>
+
+  <p>可以通过提供<code>easing</code>过渡来给指定关键帧之间应用过渡效果，如下所示： </p>
+
+  <pre class="brush: js"><em>element</em>.animate(<strong>[ { opacity: 1, easing: 'ease-out' },
+                  { opacity: 0.1, easing: 'ease-in' },
+                  { opacity: 0 } ]</strong>,
+                2000);
+</pre>
+
+  <p>在这个例子中，指定的easing仅适用于指定它的关键帧到下一帧之间。 但是在<code>options</code>中指定的 <code>easing</code> 值都将应用在一个动画的整个持续时间里。</p>
+ </li>
+ <li>一个包含key-value键值的<code>对象</code>需要包含动画的属性和要循环变化的值<code>数组</code>。
+  <pre class="brush: js"><em>element.</em>animate(<strong>{
+  opacity: [ 0, 1 ],          // [ from, to ]
+  color:   [ "#fff", "#000" ] // [ from, to ]
+}</strong>, 2000);
+</pre>
+
+  <p>使用这种格式，每个数组的元素数量不必相等。所提供的值将独立分开。</p>
+
+  <pre class="brush: js"><em>element.</em>animate(<strong>{
+  opacity: [ 0, 1 ], // offset: 0, 1
+  backgroundColor: [ "red", "yellow", "green" ], // offset: 0, 0.5, 1
+}</strong>, 2000);
+</pre>
+
+  <p>特殊键<code>offset</code>，<code>easing</code>和<code>composite</code>（如下）可以与属性值一起指定。</p>
+
+  <pre class="brush: js"><em>element.</em>animate(<strong>{
+  opacity: [ 0, 0.9, 1 ],
+  offset: [ 0, 0.8 ], // [ 0, 0.8, 1 ] 的简写
+  easing: [ 'ease-in', 'ease-out' ],
+}</strong>, 2000);
+</pre>
+
+  <p>从属性值列表生成一组合适的关键帧后，每个提供的偏移量将应用于相应的关键帧。如果值不足或者列表包含空值<code>null</code>，则以没有指定处理（即和上面第1种数组格式的一样均匀间隔）.</p>
+
+  <p>如果<code>easing</code> 或<code>composite</code> 值太少，将根据需要，重复相应的列表。</p>
+ </li>
+</ol>
+
+<h2 id="属性">属性</h2>
+
+<p>关键帧可以为任何的css动画属性指定 property-value 。 使用 camel-case 的属性名将变为 camelCase 格式，例如 {{cssxref("background-color")}} 变成 <code>backgroundColor</code> ，再如 {{cssxref("background-position-x")}} 变成 <code>backgroundPositionX</code>.。速记词，例如 {{cssxref("margin")}} 也是可以用的。.</p>
+
+<p>两个特色的css属性：</p>
+
+<ul>
+ <li>{{cssxref("float")}}, 必须写成 <code>cssFloat</code> ，因为"float" 是 JavaScript的保留关键字</li>
+ <li>{{cssxref("offset")}}, 必须写成 <code>cssOffset</code> ，因为"offset" 表示如下的关键帧 offset</li>
+</ul>
+
+<p>还可以指定以下特色属性：</p>
+
+<dl>
+ <dt>offset</dt>
+ <dd>
+ <p>关键帧的 offset 偏移量指定为介于<code>0.0</code>和<code>1.0</code>之间的数字或为<code>null</code>。 这相当于使用<code>@keyframes</code>在CSS样式表中以百分比指定开始和结束状态。 如果此值为<code>null</code>或缺失，则关键帧将在相邻关键帧之间均匀分布。</p>
+ </dd>
+ <dt>easing</dt>
+ <dd>
+ <p>从这个关键帧直到这一级中的下一个关键帧所使用的  <a href="/en-US/docs/Web/CSS/timing-function">timing function</a></p>
+ </dd>
+ <dt>composite</dt>
+ <dd>
+ <p>{{domxref("KeyframeEffect.composite")}} 操作用于将此关键帧中指定的值与基础值组合在一起。 如果正在使用在效果上指定的复合操作，则不会出现这种情况。</p>
+ </dd>
+</dl>
+</div>
+
+<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", "#processing-a-keyframes-argument", "Keyframe object formats")}}</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</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</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>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{ CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="相关推荐">相关推荐</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a></li>
+ <li>{{domxref("Element.animate()")}}</li>
+ <li>{{domxref("KeyframeEffect.KeyframeEffect()")}}</li>
+ <li>{{domxref("KeyframeEffect.setKeyframes()")}}</li>
+</ul>