2021/08/13 時点の英語版に同期

1 files changed, 82 insertions, 274 deletions

diff --git a/files/ja/web/css/animation/index.md b/files/ja/web/css/animation/index.md
index 876aeab88d..a4f2738eb2 100644
--- a/files/ja/web/css/animation/index.md
+++ b/files/ja/web/css/animation/index.md
@@ -2,273 +2,114 @@
 title: animation
 slug: Web/CSS/animation
 tags:
-  - Animation
   - CSS
   - CSS アニメーション
   - CSS プロパティ
-  - Reference
-  - animation-delay
-  - animation-direction
-  - animation-duration
-  - animation-fill-mode
-  - animation-iteration-count
-  - animation-name
-  - animation-play-state
-  - animation-timing-function
+  - リファレンス
+  - recipe:css-shorthand-property
+browser-compat: css.properties.animation
 translation_of: Web/CSS/animation
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p><span class="seoSummary"><a href="/ja/docs/CSS">CSS</a> の <strong><code>animation</code></strong> <a href="/ja/docs/Web/CSS/Shorthand_properties">一括指定</a>プロパティは、スタイル間のアニメーションを適用します。</span>これは {{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>
+**`animation`** は [CSS](/ja/docs/Web/CSS) の[一括指定](/ja/docs/Web/CSS/Shorthand_properties)プロパティで、スタイルの間のアニメーションを適用します。これは {{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")}} の一括指定です。
 
-<div>{{EmbedInteractiveExample("pages/css/animation.html")}}</div>
+{{EmbedInteractiveExample("pages/css/animation.html")}}
 
-<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
-
-<pre class="brush:css no-line-numbers">/* @keyframes duration | timing-function | delay |
+```css
+/* @keyframes duration | easing-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');
-}
+/* @keyframes name | duration | easing-function | delay */
+animation: slidein 3s linear 1s;
 
-.grid {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  background: #EEE;
-  font: 1em monospace;
-}
+/* @keyframes name | duration */
+animation: slidein 3s;
+```
 
-.row {
-  display: flex;
-  flex: 1 auto;
-  flex-direction: row;
-  flex-wrap: wrap;
-  justify-content: space-between;
-}
+[アニメーションできるプロパティの説明](/ja/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions#which_css_properties_are_animatable)があります。この説明は言うまでもなく [CSS トランジション](/ja/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions)にも有効です。
 
-.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;
-}
+- [`animation-delay`](/ja/docs/Web/CSS/animation-delay)
+- [`animation-direction`](/ja/docs/Web/CSS/animation-direction)
+- [`animation-duration`](/ja/docs/Web/CSS/animation-duration)
+- [`animation-fill-mode`](/ja/docs/Web/CSS/animation-fill-mode)
+- [`animation-iteration-count`](/ja/docs/Web/CSS/animation-iteration-count)
+- [`animation-name`](/ja/docs/Web/CSS/animation-name)
+- [`animation-play-state`](/ja/docs/Web/CSS/animation-play-state)
+- [`animation-timing-function`](/ja/docs/Web/CSS/animation-timing-function)
 
-.note {
-  background: #fff3d4;
-  padding: 1em;
-  margin: .5em;
-  font: .8em sans-serif;
-  text-align: left;
-  flex: none;
-}
+## 構文
 
-.overlay { padding: .5em; }
+`animation` プロパティは 1 つまたはカンマで区切った複数のアニメーションとして指定します。
 
-@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; }
+- 以下の値は 0 ～ 1 回出現します。
 
-.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>
+  - {{cssxref("&lt;single-transition-easing-function&gt;")}}
+  - {{cssxref("animation", "&lt;single-animation-iteration-count&gt;", "#&lt;single-animation-iteration-count&gt;")}}
+  - {{cssxref("animation", "&lt;single-animation-direction&gt;", "#&lt;single-animation-direction&gt;")}}
+  - {{cssxref("animation", "&lt;single-animation-fill-mode&gt;", "#&lt;single-animation-fill-mode&gt;")}}
+  - {{cssxref("animation", "&lt;single-animation-play-state&gt;", "#&lt;single-animation-play-state&gt;")}}
 
-<p>{{EmbedLiveSample("animation", "100%", 260, "", "", "example-outcome-frame")}}</p>
+- アニメーションの名前は任意で、 `none`, {{cssxref("&lt;custom-ident&gt;")}}, {{cssxref("&lt;string&gt;")}} のいずれかになります。
+- 0 ～ 2 個の {{cssxref("&lt;time&gt;")}} の値
 
-<p><a href="/ja/docs/Web/Guide/CSS/Using_CSS_transitions#Which_CSS_properties_are_animatable">アニメーションできるプロパティの説明</a>があります。この説明は言うまでもなく <a href="/ja/docs/Web/Guide/CSS/Using_CSS_transitions">CSS トランジション</a>にも有効です。</p>
+各アニメーションの定義の中での順序は重要です。{{cssxref("&lt;time&gt;")}} として解釈される最初の値は、 {{cssxref("animation-duration")}} に、そして2番目の値は、{{cssxref("animation-delay")}} に割り当てられます。
 
-<p>{{cssinfo}}</p>
+順序はまた、各アニメーションの定義において、他のキーワードから {{cssxref("animation-name")}} の値を区別するためにも重要です。 {{cssxref("animation-name")}} 以外のプロパティの値として解釈することが可能なキーワードは、一括指定の以前にそれらのプロパティの値が見つかっていないのならば、 {{cssxref("animation-name")}} ではなく、それらのプロパティの値として取り扱われます。また、シリアライズされる場合には、他のプロパティの既定値は少なくとも、他のプロパティの値と解釈することも可能な {{cssxref("animation-name")}}と区別する必要がある場合には出力する必要があり、他の場合には出力してもいいことになっています。
 
-<h2 id="Syntax" name="Syntax">構文</h2>
+### 値
 
-<p><code>animation</code> プロパティは1つまたはコンマで区切った複数のアニメーションとして指定します。</p>
+- `<single-animation-iteration-count>`
+  - : アニメーションが実行される回数です。 {{cssxref("animation-iteration-count")}} で利用できる値の一つでなければなりません。
+- `<single-animation-direction>`
+  - : アニメーションが実行される方向です。 {{cssxref("animation-direction")}} で利用できる値の一つでなければなりません。
+- `<single-animation-fill-mode>`
+  - : アニメーションの実行の前後にどのようにスタイルが適用されるかを定めます。 {{cssxref("animation-fill-mode")}} で利用できる値の一つでなければなりません。
+- `<single-animation-play-state>`
+  - : アニメーションが実行中かどうかを定めます。 {{cssxref("animation-play-state")}} で利用できる値の一つでなければなりません。
 
-<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>アニメーションの名前は任意で、 <code>none</code>, {{cssxref("&lt;custom-ident&gt;")}}, {{cssxref("&lt;string&gt;")}} のいずれかになります。</li>
- <li>0～2回の {{cssxref("&lt;time&gt;")}} の値</li>
-</ul>
+点滅を伴うアニメーションは、注意欠陥障害 (ADHD) のような認知障害を持つ人々に問題を起こす可能性があります。加えて、特定の種類の動きが、前庭障害、てんかん、片頭痛、痙攣感受性などの引き金になることもあります。
 
-<p>各アニメーションの定義の中での順序は重要です。{{cssxref("&lt;time&gt;")}} として解釈される最初の値は、 {{cssxref("animation-duration")}} に、そして2番目の値は、{{cssxref("animation-delay")}} に割り当てられます。</p>
+アニメーションを停止したり無効にしたりする仕組みを、できれば[動きを縮小するメディアクエリー](/ja/docs/Web/CSS/@media/prefers-reduced-motion)を使用して、アニメーションがない操作の設定を表明したユーザーの希望を叶えるように作成することができます。
 
-<p>順序はまた、各アニメーションの定義において、他のキーワードから {{cssxref("animation-name")}} の値を区別するためにも重要です。 {{cssxref("animation-name")}} 以外のプロパティの値として解釈することが可能なキーワードは、一括指定の以前にそれらのプロパティの値が見つかっていないのならば、 {{cssxref("animation-name")}} ではなく、それらのプロパティの値として取り扱われます。また、シリアライズされる場合には、他のプロパティの既定値は少なくとも、他のプロパティの値と解釈することも可能な {{cssxref("animation-name")}}と区別する必要がある場合には出力する必要があり、他の場合には出力してもいいことになっています。</p>
+- [Designing Safer Web Animation For Motion Sensitivity · An A List Apart Article](https://alistapart.com/article/designing-safer-web-animation-for-motion-sensitivity)
+- [An Introduction to the Reduced Motion Media Query | CSS-Tricks](https://css-tricks.com/introduction-reduced-motion-media-query/)
+- [Responsive Design for Motion | WebKit](https://webkit.org/blog/7551/responsive-design-for-motion/)
+- [MDN Understanding WCAG, Guideline 2.2 explanations](/ja/docs/Web/Accessibility/Understanding_WCAG/Operable#guideline_2.2_%e2%80%94_enough_time_provide_users_enough_time_to_read_and_use_content)
+- [Understanding Success Criterion 2.2.2 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/time-limits-pause.html)
 
-<h3 id="Values" name="Values">値</h3>
+## 公式定義
 
-<dl>
- <dt><code id="&lt;single-animation-iteration-count>">&lt;single-animation-iteration-count&gt;</code></dt>
- <dd>アニメーションが実行される回数です。 {{cssxref("animation-iteration-count")}} で利用できる値の一つでなければなりません。</dd>
- <dt><code id="&lt;single-animation-direction>">&lt;single-animation-direction&gt;</code></dt>
- <dd>アニメーションが実行される方向です。 {{cssxref("animation-direction")}} で利用できる値の一つでなければなりません。</dd>
- <dt><code id="&lt;single-animation-fill-mode>">&lt;single-animation-fill-mode&gt;</code></dt>
- <dd>アニメーションの実行の前後にどのようにスタイルが適用されるかを定めます。 {{cssxref("animation-fill-mode")}} で利用できる値の一つでなければなりません。</dd>
- <dt><code id="&lt;single-animation-play-state>">&lt;single-animation-play-state&gt;</code></dt>
- <dd>アニメーションが実行中かどうかを定めます。 {{cssxref("animation-play-state")}} で利用できる値の一つでなければなりません。</dd>
-</dl>
+{{cssinfo}}
 
-<h3 id="Formal_syntax" name="Formal_syntax">構文形式</h3>
+## 形式文法
 
 {{csssyntax}}
 
-<h2 id="Examples" name="Examples">例</h2>
+## 例
 
-<h3 id="Cylon_Eye" name="Cylon_Eye">台風の目</h3>
+### 台風の目
 
-<pre class="brush: html">&lt;div class="view_port"&gt;
-  &lt;div class="polling_message"&gt;
+```html
+<div class="view_port">
+  <div class="polling_message">
     Listening for dispatches
-  &lt;/div&gt;
-  &lt;div class="cylon_eye"&gt;&lt;/div&gt;
-&lt;/div&gt;
-</pre>
+  </div>
+  <div class="cylon_eye"></div>
+</div>
+```
 
-<pre class="brush: css">.polling_message {
+```css
+.polling_message {
   color: white;
   float: left;
   margin-right: 2%;
@@ -297,60 +138,27 @@ button.restart {
 
 @-webkit-keyframes move_eye { from { margin-left: -20%; } to { margin-left: 100%; }  }
         @keyframes move_eye { from { margin-left: -20%; } to { margin-left: 100%; }  }
-</pre>
-
-<p>{{EmbedLiveSample('Cylon_Eye')}}</p>
-
-<p>これ以外の例は <a href="/ja/docs/Web/CSS/CSS_Animations/Using_CSS_animations" title="CSS/CSS animations">CSS アニメーション</a>を参照してください。</p>
-
-<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮事項</h2>
-
-<p>点滅を伴うアニメーションは、注意欠陥障害 (ADHD) のような認知障害を持つ人々に問題を起こす可能性があります。加えて、特定の種類の動きが、前庭障害、てんかん、片頭痛、痙攣感受性などの引き金になることもあります。</p>
+```
 
-<p>アニメーションを停止したり無効にしたりする仕組みを、できれば <a href="/ja/docs/Web/CSS/@media/prefers-reduced-motion">Reduced Motion Media Query</a> を使用して、アニメーションがない操作の設定を表明したユーザーの希望を叶えるように作成することができます。</p>
+{{EmbedLiveSample('Cylon_Eye')}}
 
-<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="/ja/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>
+これ以外の例は [CSS アニメーション](/ja/docs/Web/CSS/CSS_Animations/Using_CSS_animations)を参照してください。
 
-<h2 id="Specifications" name="Specifications">仕様書</h2>
+## 仕様書
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">仕様書</th>
-   <th scope="col">状態</th>
-   <th scope="col">備考</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Animations', '#animation', 'animation')}}</td>
-   <td>{{Spec2('CSS3 Animations')}}</td>
-   <td>初回定義</td>
-  </tr>
- </tbody>
-</table>
+{{Specifications}}
 
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+## ブラウザーの互換性
 
-<p>{{Compat("css.properties.animation")}}</p>
+{{Compat}}
 
-<h3 id="Quantum_CSS_notes" name="Quantum_CSS_notes">Quantum CSS のメモ</h3>
+### Quantum CSS のメモ
 
-<ul>
- <li>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 のバグとして、 {{htmlelement("details")}} 要素が <code>open</code> 属性を使用しても、アニメーションが有効になっていると既定で開かないというものがあります ({{bug(1382124)}})。 Quantum CSS では修正されています。</li>
- <li>さらに他のバグとして、 em の単位を使用してアニメーションする要素の親の {{cssxref("font-size")}} を変更しても影響されないというものがあります ({{bug(1254424)}})。 Quantum CSS では修正されています。</li>
-</ul>
+- Gecko には、画面上でオフスクリーン要素をアニメーションさせたとき、遅延を指定すると、 Windows など一部のプラットフォームで再描画しないというバグがあります ({{bug(1383239)}})。これは Firefox の新しい並列 CSS エンジン（[Quantum CSS](https://wiki.mozilla.org/Quantum) または [Stylo](https://wiki.mozilla.org/Quantum/Stylo) と呼ばれており、 Firefox 57 でリリースする計画です）で修正されています。
+- 他の Gecko のバグとして、 {{htmlelement("details")}} 要素が `open` 属性を使用しても、アニメーションが有効になっていると既定で開かないというものがあります ({{bug(1382124)}})。 Quantum CSS では修正されています。
+- さらに他のバグとして、 em の単位を使用してアニメーションする要素の親の {{cssxref("font-size")}} を変更しても影響されないというものがあります ({{bug(1254424)}})。 Quantum CSS では修正されています。
 
-<h2 id="See_also" name="See_also">関連情報</h2>
+## 関連情報
 
-<ul>
- <li><a href="/ja/docs/Web/CSS/CSS_Animations/Using_CSS_animations">CSS アニメーションの使用</a></li>
- <li>JavaScript {{domxref("AnimationEvent")}} API</li>
-</ul>
+- [CSS アニメーションの使用](/ja/docs/Web/CSS/CSS_Animations/Using_CSS_animations)
+- JavaScript の {{domxref("AnimationEvent")}} API