initial commit

1 files changed, 344 insertions, 0 deletions

diff --git a/files/zh-cn/web/css/animation/index.html b/files/zh-cn/web/css/animation/index.html
new file mode 100644
index 0000000000..d503f6b8f4
--- /dev/null
+++ b/files/zh-cn/web/css/animation/index.html
@@ -0,0 +1,344 @@
+---
+title: animation
+slug: Web/CSS/animation
+tags:
+  - CSS
+  - CSS Animations
+  - CSS Property
+  - CSS3 动画
+  - Reference
+translation_of: Web/CSS/animation
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/zh-CN/docs/Web/CSS">CSS</a> <strong>animation</strong> 属性是 {{cssxref("animation-name")}}，{{cssxref("animation-duration")}}, {{cssxref("animation-timing-function")}}，{{cssxref("animation-delay")}}，{{cssxref("animation-iteration-count")}}，{{cssxref("animation-direction")}}，{{cssxref("animation-fill-mode")}} 和 {{cssxref("animation-play-state")}} 属性的一个简写属性形式。</p>
+
+<p>{{EmbedInteractiveExample("pages/css/animation.html")}}</p>
+
+<pre class="brush: css">/* @keyframes duration | timing-function | delay |
+   iteration-count | direction | fill-mode | play-state | name */
+animation: 3s ease-in 1s 2 reverse both paused slidein;
+
+/* @keyframes duration | timing-function | delay | name */
+animation: 3s linear 1s slidein;
+
+/* @keyframes duration | name */
+animation: 3s slidein;</pre>
+
+<div class="hidden" id="animation">
+<pre class="brush: html">&lt;div class="grid"&gt;
+  &lt;div class="col"&gt;
+    &lt;div class="note"&gt;
+      Given the following animation:
+      &lt;pre&gt;@keyframes slidein {
+  from { transform: scaleX(0); }
+  to   { transform: scaleX(1); }
+}&lt;/pre&gt;
+    &lt;/div&gt;
+    &lt;div class="row"&gt;
+      &lt;div class="cell"&gt;
+        &lt;button class="play" title="PLAY"&gt;&lt;/button&gt;
+      &lt;/div&gt;
+      &lt;div class="cell flx"&gt;
+        &lt;div class="overlay"&gt;animation: 3s ease-in 1s 2 reverse both paused slidein;&lt;/div&gt;
+        &lt;div class="animation a1"&gt;&lt;/div&gt;
+      &lt;/div&gt;
+    &lt;/div&gt;
+    &lt;div class="row"&gt;
+      &lt;div class="cell"&gt;
+        &lt;button class="pause" title="PAUSE"&gt;&lt;/button&gt;
+      &lt;/div&gt;
+      &lt;div class="cell flx"&gt;
+        &lt;div class="overlay"&gt;animation: 3s linear 1s slidein;&lt;/div&gt;
+        &lt;div class="animation a2"&gt;&lt;/div&gt;
+      &lt;/div&gt;
+    &lt;/div&gt;
+    &lt;div class="row"&gt;
+      &lt;div class="cell"&gt;
+        &lt;button class="pause" title="PAUSE"&gt;&lt;/button&gt;
+      &lt;/div&gt;
+      &lt;div class="cell flx"&gt;
+        &lt;div class="overlay"&gt;animation: 3s slidein;&lt;/div&gt;
+        &lt;div class="animation a3"&gt;&lt;/div&gt;
+      &lt;/div&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<pre class="brush: css">html,body {
+  height: 100%;
+  box-sizing: border-box;
+}
+
+pre { margin-bottom: 0; }
+svg { width: 1.5em; height: 1.5em; }
+
+button {
+  width: 27px;
+  height: 27px;
+  background-size: 16px;
+  background-position: center;
+  background-repeat: no-repeat;
+  border-radius: 3px;
+  cursor: pointer;
+}
+
+button.play {
+  background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cstyle%3Epath%20%7Bdisplay%3Anone%7D%20path%3Atarget%7Bdisplay%3Ablock%7D%3C%2Fstyle%3E%3Cpath%20id%3D%22play%22%20d%3D%22M3%2C3%20L3%2C13%20L13%2C8%20Z%22%20%2F%3E%3Cpath%20id%3D%22pause%22%20d%3D%22M5%2C4%20L7%2C4%20L7%2C13%20L5%2C13%20Z%20M9%2C4%20L11%2C4%20L11%2C13%20L9%2C13%20Z%22%20%2F%3E%3Cpath%20id%3D%22restart%22%20d%3D%22M13%2C9%20A5%2C5%2C1%2C1%2C1%2C8%2C4%20L8%2C2%20L12%2C5%20L8%2C8%20L8%2C6%20A3%2C3%2C1%2C1%2C0%2C11%2C9%20A1%2C1%2C1%2C1%2C1%2C13%2C9%20z%22%20%2F%3E%3C%2Fsvg%3E#play');
+}
+
+button.pause {
+  background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cstyle%3Epath%20%7Bdisplay%3Anone%7D%20path%3Atarget%7Bdisplay%3Ablock%7D%3C%2Fstyle%3E%3Cpath%20id%3D%22play%22%20d%3D%22M3%2C3%20L3%2C13%20L13%2C8%20Z%22%20%2F%3E%3Cpath%20id%3D%22pause%22%20d%3D%22M5%2C4%20L7%2C4%20L7%2C13%20L5%2C13%20Z%20M9%2C4%20L11%2C4%20L11%2C13%20L9%2C13%20Z%22%20%2F%3E%3Cpath%20id%3D%22restart%22%20d%3D%22M13%2C9%20A5%2C5%2C1%2C1%2C1%2C8%2C4%20L8%2C2%20L12%2C5%20L8%2C8%20L8%2C6%20A3%2C3%2C1%2C1%2C0%2C11%2C9%20A1%2C1%2C1%2C1%2C1%2C13%2C9%20z%22%20%2F%3E%3C%2Fsvg%3E#pause');
+}
+
+button.restart {
+  background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cstyle%3Epath%20%7Bdisplay%3Anone%7D%20path%3Atarget%7Bdisplay%3Ablock%7D%3C%2Fstyle%3E%3Cpath%20id%3D%22play%22%20d%3D%22M3%2C3%20L3%2C13%20L13%2C8%20Z%22%20%2F%3E%3Cpath%20id%3D%22pause%22%20d%3D%22M5%2C4%20L7%2C4%20L7%2C13%20L5%2C13%20Z%20M9%2C4%20L11%2C4%20L11%2C13%20L9%2C13%20Z%22%20%2F%3E%3Cpath%20id%3D%22restart%22%20d%3D%22M13%2C9%20A5%2C5%2C1%2C1%2C1%2C8%2C4%20L8%2C2%20L12%2C5%20L8%2C8%20L8%2C6%20A3%2C3%2C1%2C1%2C0%2C11%2C9%20A1%2C1%2C1%2C1%2C1%2C13%2C9%20z%22%20%2F%3E%3C%2Fsvg%3E#restart');
+}
+
+.grid {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  background: #EEE;
+  font: 1em monospace;
+}
+
+.row {
+  display: flex;
+  flex: 1 auto;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+
+.col {
+  display: flex;
+  flex: 1 auto;
+  flex-direction: column;
+}
+
+.cell {
+  box-sizing: border-box;
+  margin: .5em;
+  padding: 0;
+  background-color: #FFF;
+  overflow: hidden;
+  text-align: left;
+}
+
+.flx {
+  flex: 1 0;
+}
+
+.note {
+  background: #fff3d4;
+  padding: 1em;
+  margin: .5em;
+  font: .8em sans-serif;
+  text-align: left;
+  flex: none;
+}
+
+.overlay { padding: .5em; }
+
+@keyframes slidein {
+  from { transform: scaleX(0); }
+  to { transform: scaleX(1); }
+}
+
+.a1 { animation: 3s ease-in 1s 2 reverse both paused slidein; }
+.a2 { animation: 3s linear 1s slidein; }
+.a3 { animation: 3s slidein; }
+
+.animation {
+  background: #3F87A6;
+  width: 100%;
+  height: calc(100% - 1.5em);
+  transform-origin: left center;
+}</pre>
+
+<pre class="brush: js">window.addEventListener('load', function () {
+  var ANIMATION = Array.from(document.querySelectorAll('.animation'));
+  var BUTTON    = Array.from(document.querySelectorAll('button'));
+
+  function toggleButton (btn, type) {
+    btn.classList.remove('play', 'pause', 'restart');
+    btn.classList.add(type);
+    btn.title = type.toUpperCase(type);
+  }
+
+  function playPause (i) {
+    var btn  = BUTTON[i];
+    var anim = ANIMATION[i];
+
+    if (btn.classList.contains('play')) {
+      anim.style.animationPlayState = 'running';
+      toggleButton(btn, 'pause');
+    } else if (btn.classList.contains('pause')) {
+      anim.style.animationPlayState = 'paused';
+      toggleButton(btn, 'play');
+    } else {
+      anim.classList.remove('a' + (i + 1));
+      setTimeout(function () {
+        toggleButton(btn, i === 0 ? 'play' : 'pause');
+        anim.style.animationPlayState = '';
+        anim.classList.add('a' + (i + 1));
+      }, 100)
+    }
+  }
+
+  ANIMATION.forEach(function (node, index) {
+    node.addEventListener('animationstart', function () { toggleButton(BUTTON[index], 'pause');   });
+    node.addEventListener('animationend',   function () { toggleButton(BUTTON[index], 'restart'); });
+  });
+
+  BUTTON.forEach(function (btn, index) {
+    btn.addEventListener('click', function () { playPause(index); });
+  });
+})</pre>
+</div>
+
+<p>{{EmbedLiveSample("animation", "100%", 260, "", "", "example-outcome-frame")}}</p>
+
+<p><a href="/zh-CN/docs/Web/Guide/CSS/Using_CSS_transitions#Which_CSS_properties_are_animatable">哪些属性是可动画的？</a>值得注意的是，此描述也适用于<a href="/en-US/docs/CSS/CSS_transitions">CSS变换</a>。</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="语法">语法</h2>
+
+<p><code>animation</code> 属性用来指定一组或多组动画，每组之间用逗号相隔。</p>
+
+<p>每组动画规定的属性如下：</p>
+
+<ul>
+ <li>以下属性出现0次或1次：
+  <ul>
+   <li>{{cssxref("&lt;single-transition-timing-function&gt;")}}</li>
+   <li>{{cssxref("animation", "&lt;single-animation-iteration-count&gt;", "#&lt;single-animation-iteration-count&gt;")}}</li>
+   <li>{{cssxref("animation", "&lt;single-animation-direction&gt;", "#&lt;single-animation-direction&gt;")}}</li>
+   <li>{{cssxref("animation", "&lt;single-animation-fill-mode&gt;", "#&lt;single-animation-fill-mode&gt;")}}</li>
+   <li>{{cssxref("animation", "&lt;single-animation-play-state&gt;", "#&lt;single-animation-play-state&gt;")}}</li>
+  </ul>
+ </li>
+ <li>animation 的 name 值可能是：none，{{cssxref("&lt;custom-ident&gt;")}}， {{cssxref("&lt;string&gt;")}}</li>
+ <li>{{cssxref("&lt;time&gt;")}} 可能会出现0、1 或 2 次</li>
+</ul>
+
+<p>每个动画定义中的属性值的顺序很重要：可以被解析为 {{cssxref("&lt;time&gt;")}} 的第一个值被分配给{{cssxref("animation-duration")}}， 第二个分配给 {{cssxref("animation-delay")}}。</p>
+
+<p>每个动画定义中的值的顺序，对于区分 {{cssxref("animation-name")}} 值与其他关键字也很重要。解析时，对于除 {{cssxref("animation-name")}} 之外的有效的关键字，必须被前面的简写中没有找到值的属性所接受。此外，在序列化时，{{cssxref("animation-name")}} 与以及其他属性值做区分等情况下，必须输出其他属性的默认值。</p>
+
+<h3 id="Values">Values</h3>
+
+<dl>
+ <dt><code><a id="&lt;single-animation-iteration-count>" name="&lt;single-animation-iteration-count>">&lt;single-animation-iteration-count&gt;</a></code></dt>
+ <dd>动画播放的次数。该值必须是{{cssxref("animation-iteration-count")}}可用的值之一。</dd>
+ <dt><a id="&lt;single-animation-direction>" name="&lt;single-animation-direction>"><code>&lt;single-animation-direction&gt;</code></a></dt>
+ <dd>动画播放的方向。该值必须是{{cssxref("animation-direction")}}可用的值之一。</dd>
+ <dt><a id="&lt;single-animation-fill-mode>" name="&lt;single-animation-fill-mode>"><code>&lt;single-animation-fill-mode&gt;</code></a></dt>
+ <dd>确定动画在执行之前和之后这两个阶段应用的样式。该值必须是{{cssxref("animation-fill-mode")}}可用的值之一。</dd>
+ <dt><code><a id="&lt;single-animation-play-state>" name="&lt;single-animation-play-state>">&lt;single-animation-play-state&gt;</a></code></dt>
+ <dd>确定动画是否正在播放。该值必须是{{cssxref("animation-play-state")}}中可用的值之一。</dd>
+</dl>
+
+<h3 id="语法_2">语法</h3>
+
+<pre class="syntaxbox">{{csssyntax("animation")}}
+</pre>
+
+<h2 id="范例">范例</h2>
+
+<h3 id="Cylon_Eye" name="Cylon_Eye"><strong>赛隆人之眼(赛隆人</strong>是一个虚构的生化人种族,出自科幻电视系列剧星际大争霸系列<strong>)</strong></h3>
+
+<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>view_port<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>polling_message<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+    Listening for dispatches
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>cylon_eye<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<pre class="brush: css line-numbers language-css"><code class="language-css"><span class="selector token"><span class="class token">.polling_message</span></span> <span class="punctuation token">{</span>
+  <span class="property token">color</span><span class="punctuation token">:</span> white<span class="punctuation token">;</span>
+  <span class="property token">float</span><span class="punctuation token">:</span> left<span class="punctuation token">;</span>
+  <span class="property token">margin-right</span><span class="punctuation token">:</span> <span class="number token">2</span><span class="token unit">%</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="selector token"><span class="class token">.view_port</span></span> <span class="punctuation token">{</span>
+  <span class="property token">background-color</span><span class="punctuation token">:</span> black<span class="punctuation token">;</span>
+  <span class="property token">height</span><span class="punctuation token">:</span> <span class="number token">25</span><span class="token unit">px</span><span class="punctuation token">;</span>
+  <span class="property token">width</span><span class="punctuation token">:</span> <span class="number token">100</span><span class="token unit">%</span><span class="punctuation token">;</span>
+  <span class="property token">overflow</span><span class="punctuation token">:</span> hidden<span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="selector token"><span class="class token">.cylon_eye</span></span> <span class="punctuation token">{</span>
+  <span class="property token">background-color</span><span class="punctuation token">:</span> red<span class="punctuation token">;</span>
+  <span class="property token">background-image</span><span class="punctuation token">:</span> <span class="function token">linear-gradient</span><span class="punctuation token">(</span>to right<span class="punctuation token">,</span>
+      <span class="function token">rgba</span><span class="punctuation token">(</span><span class="number token">0</span><span class="punctuation token">,</span> <span class="number token">0</span><span class="punctuation token">,</span> <span class="number token">0</span><span class="punctuation token">,</span> <span class="number token">.9</span><span class="punctuation token">)</span> <span class="number token">25</span><span class="token unit">%</span><span class="punctuation token">,</span>
+      <span class="function token">rgba</span><span class="punctuation token">(</span><span class="number token">0</span><span class="punctuation token">,</span> <span class="number token">0</span><span class="punctuation token">,</span> <span class="number token">0</span><span class="punctuation token">,</span> <span class="number token">.1</span><span class="punctuation token">)</span> <span class="number token">50</span><span class="token unit">%</span><span class="punctuation token">,</span>
+      <span class="function token">rgba</span><span class="punctuation token">(</span><span class="number token">0</span><span class="punctuation token">,</span> <span class="number token">0</span><span class="punctuation token">,</span> <span class="number token">0</span><span class="punctuation token">,</span> <span class="number token">.9</span><span class="punctuation token">)</span> <span class="number token">75</span><span class="token unit">%</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="property token">color</span><span class="punctuation token">:</span> white<span class="punctuation token">;</span>
+  <span class="property token">height</span><span class="punctuation token">:</span> <span class="number token">100</span><span class="token unit">%</span><span class="punctuation token">;</span>
+  <span class="property token">width</span><span class="punctuation token">:</span> <span class="number token">20</span><span class="token unit">%</span><span class="punctuation token">;</span>
+
+  <span class="property token">-webkit-animation</span><span class="punctuation token">:</span> <span class="number token">4</span><span class="token unit">s</span> linear <span class="number token">0</span><span class="token unit">s</span> infinite alternate move_eye<span class="punctuation token">;</span>
+          <span class="property token">animation</span><span class="punctuation token">:</span> <span class="number token">4</span><span class="token unit">s</span> linear <span class="number token">0</span><span class="token unit">s</span> infinite alternate move_eye<span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="atrule token"><span class="rule token">@-webkit-keyframes</span> move_eye</span> <span class="punctuation token">{</span> <span class="selector token">from</span> <span class="punctuation token">{</span> <span class="property token">margin-left</span><span class="punctuation token">:</span> <span class="number token">-20</span><span class="token unit">%</span><span class="punctuation token">;</span> <span class="punctuation token">}</span> <span class="selector token">to</span> <span class="punctuation token">{</span> <span class="property token">margin-left</span><span class="punctuation token">:</span> <span class="number token">100</span><span class="token unit">%</span><span class="punctuation token">;</span> <span class="punctuation token">}</span>  <span class="punctuation token">}</span>
+        <span class="atrule token"><span class="rule token">@keyframes</span> move_eye</span> <span class="punctuation token">{</span> <span class="selector token">from</span> <span class="punctuation token">{</span> <span class="property token">margin-left</span><span class="punctuation token">:</span> <span class="number token">-20</span><span class="token unit">%</span><span class="punctuation token">;</span> <span class="punctuation token">}</span> <span class="selector token">to</span> <span class="punctuation token">{</span> <span class="property token">margin-left</span><span class="punctuation token">:</span> <span class="number token">100</span><span class="token unit">%</span><span class="punctuation token">;</span> <span class="punctuation token">}</span>  <span class="punctuation token">}</span></code></pre>
+
+<p>{{EmbedLiveSample('Cylon_Eye')}}</p>
+
+<p>更多示例请参阅<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations#Examples">使用CSS动画</a>。</p>
+
+<h2 id="潜在的问题">潜在的问题</h2>
+
+<p>眨眼和闪烁的动画对于有认知问题的人来说是有问题的，比如注意力缺陷多动障碍(ADHD)。此外，某些动画效果可以触发前庭神经紊乱、癫痫、偏头痛和暗点敏感性。</p>
+
+<p>考虑提供一种暂停或禁用动画的机制，以及使用 <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion">Reduced Motion Media Query</a>（简约运动媒体查询），为那些表示不喜欢动画的用户创建一个良好的体验。</p>
+
+<ul>
+ <li><a href="https://alistapart.com/article/designing-safer-web-animation-for-motion-sensitivity">Designing Safer Web Animation For Motion Sensitivity · An A List Apart Article </a></li>
+ <li><a href="https://css-tricks.com/introduction-reduced-motion-media-query/">An Introduction to the Reduced Motion Media Query | CSS-Tricks</a></li>
+ <li><a href="https://webkit.org/blog/7551/responsive-design-for-motion/">Responsive Design for Motion | WebKit</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Operable#Guideline_2.2_%E2%80%94_Enough_Time_Provide_users_enough_time_to_read_and_use_content">MDN Understanding WCAG, Guideline 2.2 explanations</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/time-limits-pause.html">Understanding Success Criterion 2.2.2  | W3C Understanding WCAG 2.0</a></li>
+</ul>
+
+<h2 id="规范">规范</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Animations', '#animation', 'animation')}}</td>
+   <td>{{Spec2('CSS3 Animations')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility"><span style="white-space: nowrap;">浏览器兼容性</span></h2>
+
+<p>{{Compat("css.properties.animation")}}</p>
+
+<h3 id="Quantum_CSS_notes">Quantum CSS notes</h3>
+
+<ul>
+ <li>Gecko有一个bug，当你在屏幕上对屏幕外的元素使用带有指定延时的动画时，Gecko不会在某些平台上重绘，例如Windows {{bug(1383239)}}。这个问题已经在Firefox新的并行CSS引擎(也称为<a href="https://wiki.mozilla.org/Quantum">Quantum CSS</a> 或者 <a href="https://wiki.mozilla.org/Quantum/Stylo">Stylo</a>，计划在Firefox 57中发布)中得到了解决。</li>
+ <li>另外一个Gecko bug，当我们激活&lt;details&gt;元素的动画效果时，即使通过 open 属性也不能将其展示({{bug(1382124)}})。Quantum CSS会将其修复了。</li>
+ <li>另一个bug是，由于动画使用的是em单位，所以即使我们改变父元素的font-size属性也不会影响该动画元素({{bug(1254424)}})，而它们原本应该受到影响。Quantum CSS会将其修复了。</li>
+</ul>
+
+<h2 id="更多">更多</h2>
+
+<ul>
+ <li><a href="/en-US/docs/CSS/Tutorials/Using_CSS_animations" title="Tutorial about CSS animations">Using CSS animations</a></li>
+ <li>JavaScript {{domxref("AnimationEvent")}} API</li>
+</ul>