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

1 files changed, 77 insertions, 126 deletions

diff --git a/files/ja/web/css/animation-fill-mode/index.md b/files/ja/web/css/animation-fill-mode/index.md
index a5fc4e219d..96cd0aea5d 100644
--- a/files/ja/web/css/animation-fill-mode/index.md
+++ b/files/ja/web/css/animation-fill-mode/index.md
@@ -6,21 +6,22 @@ tags:
   - CSS アニメーション
   - CSS プロパティ
   - リファレンス
+  - recipe:css-property
+browser-compat: css.properties.animation-fill-mode
 translation_of: Web/CSS/animation-fill-mode
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>animation-fill-mode</code></strong> プロパティは、 CSS アニメーションの実行の前後にどう対象にスタイルを適用するかを設定します。</p>
+**`animation-fill-mode`** は [CSS](/ja/docs/Web/CSS) のプロパティで、 CSS アニメーションの実行の前後にどう対象にスタイルを適用するかを設定します。
 
-<div>{{EmbedInteractiveExample("pages/css/animation-fill-mode.html")}}</div>
+{{EmbedInteractiveExample("pages/css/animation-fill-mode.html")}}
 
-<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
+アニメーションのプロパティすべてを一度に設定するには、一括指定プロパティである {{cssxref("animation")}} を使用すると便利です。
 
-<p>アニメーションのプロパティすべてを一度に設定するには、一括指定プロパティである {{cssxref("animation")}} を使用すると便利です。</p>
+## 構文
 
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<pre class="brush: css no-line-numbers">/* 単一のアニメーション */
+```css
+/* 単一のアニメーション */
 animation-fill-mode: none;
 animation-fill-mode: forwards;
 animation-fill-mode: backwards;
@@ -29,105 +30,71 @@ animation-fill-mode: both;
 /* 複数のアニメーション */
 animation-fill-mode: none, backwards;
 animation-fill-mode: both, forwards, none;
-</pre>
-
-<h3 id="Values" name="Values">値</h3>
-
-<dl>
- <dt><code>none</code></dt>
- <dd>アニメーションが実行されていない時は、対象にスタイルを適用しません。要素は適用されているその他の CSS 規則を使用して表示されます。これが既定値です。</dd>
- <dt><code>forwards</code></dt>
- <dd>対象は実行の最後の<a href="/ja/docs/Web/CSS/@keyframes">キーフレーム</a>で設定された計算値を保持します。最後のキーフレームは {{cssxref("animation-direction")}} と {{cssxref("animation-iteration-count")}} の値によって変わります。
- <table class="standard-table">
-  <thead>
-   <tr>
-    <th scope="col"><code>animation-direction</code></th>
-    <th scope="col"><code>animation-iteration-count</code></th>
-    <th scope="col">最後のキーフレーム</th>
-   </tr>
-  </thead>
-  <tbody>
-   <tr>
-    <td><code>normal</code></td>
-    <td>偶数または奇数</td>
-    <td><code>100%</code> または <code>to</code></td>
-   </tr>
-   <tr>
-    <td><code>reverse</code></td>
-    <td>偶数または奇数</td>
-    <td><code>0%</code> または <code>from</code></td>
-   </tr>
-   <tr>
-    <td><code>alternate</code></td>
-    <td>偶数</td>
-    <td><code>0%</code> または <code>from</code></td>
-   </tr>
-   <tr>
-    <td><code>alternate</code></td>
-    <td>奇数</td>
-    <td><code>100%</code> または <code>to</code></td>
-   </tr>
-   <tr>
-    <td><code>alternate-reverse</code></td>
-    <td>偶数</td>
-    <td><code>100%</code> または <code>to</code></td>
-   </tr>
-   <tr>
-    <td><code>alternate-reverse</code></td>
-    <td>奇数</td>
-    <td><code>0%</code> または <code>from</code></td>
-   </tr>
-  </tbody>
- </table>
- </dd>
- <dt><code>backwards</code></dt>
- <dd>アニメーションは最初の適切な<a href="/ja/docs/Web/CSS/@keyframes">キーフレーム</a>で定義された値を対象に適用されると同時に適用し、 {{cssxref("animation-delay")}} の期間これを保持します。最初の適切なキーフレームは、 {{cssxref("animation-direction")}} の値によって変わります。
- <table class="standard-table">
-  <thead>
-   <tr>
-    <th scope="col"><code>animation-direction</code></th>
-    <th scope="col">最初の適切なキーフレーム</th>
-   </tr>
-  </thead>
-  <tbody>
-   <tr>
-    <td><code>normal</code> または <code>alternate</code></td>
-    <td><code>0%</code> または <code>from</code></td>
-   </tr>
-   <tr>
-    <td><code>reverse</code> または <code>alternate-reverse</code></td>
-    <td><code>100%</code> または <code>to</code></td>
-   </tr>
-  </tbody>
- </table>
- </dd>
- <dt><code>both</code></dt>
- <dd>アニメーションは forwards と backwards の両方の既定に従います。よって、アニメーションの設定は実行前と実行後の両方に適用されます。</dd>
-</dl>
-
-<div class="note">
-<p><strong>メモ</strong>: <code>animation-*</code> プロパティにコンマ区切りで複数の値を指定した場合、 {{cssxref("animation-name")}} プロパティで指定したアニメーションに割り当てられますが、いくつあるかによって異なる方法で割り当てられます。詳しくは、<a href="/ja/docs/Web/CSS/CSS_Animations/Using_CSS_animations#Setting_multiple_animation_property_values">複数のアニメーションプロパティ値の設定</a> を参照してください。</p>
-</div>
 
-<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+/* グローバル値 */
+animation-fill-mode: inherit;
+animation-fill-mode: initial;
+animation-fill-mode: revert;
+animation-fill-mode: unset;
+```
+
+### 値
+
+- `none`
+  - : アニメーションが実行されていない時は、対象にスタイルを適用しません。要素は適用されているその他の CSS 規則を使用して表示されます。これが既定値です。
+- `forwards`
+
+  - : 対象は実行の最後の[キーフレーム](/ja/docs/Web/CSS/@keyframes)で設定された計算値を保持します。最後のキーフレームは {{cssxref("animation-direction")}} と {{cssxref("animation-iteration-count")}} の値によって変わります。
+
+    | `animation-direction` | `animation-iteration-count` | 最後のキーフレーム |
+    | --------------------- | --------------------------- | ------------------ |
+    | `normal`              | 偶数または奇数              | `100%` または `to` |
+    | `reverse`             | 偶数または奇数              | `0%` または `from` |
+    | `alternate`           | 偶数                        | `0%` または `from` |
+    | `alternate`           | 奇数                        | `100%` または `to` |
+    | `alternate-reverse`   | 偶数                        | `100%` または `to` |
+    | `alternate-reverse`   | 奇数                        | `0%` または `from` |
+
+- `backwards`
+
+  - : アニメーションは最初の適切な[キーフレーム](/ja/docs/Web/CSS/@keyframes)で定義された値を対象に適用されると同時に適用し、 {{cssxref("animation-delay")}} の期間これを保持します。最初の適切なキーフレームは、 {{cssxref("animation-direction")}} の値によって変わります。
+
+    | `animation-direction`                | 最初の適切なキーフレーム |
+    | ------------------------------------ | ------------------------ |
+    | `normal` または `alternate`          | `0%` または `from`       |
+    | `reverse` または `alternate-reverse` | `100%` または `to`       |
+
+- `both`
+  - : アニメーションは forwards と backwards の両方の既定に従います。よって、アニメーションの設定は実行前と実行後の両方に適用されます。
+
+> **Note:** `animation-*` プロパティにカンマ区切りで複数の値を指定した場合、 {{cssxref("animation-name")}} プロパティで指定したアニメーションに割り当てられますが、いくつあるかによって異なる方法で割り当てられます。詳しくは、[複数のアニメーションプロパティ値の設定](/ja/docs/Web/CSS/CSS_Animations/Using_CSS_animations#setting_multiple_animation_property_values) を参照してください。
+
+## 公式定義
+
+{{cssinfo}}
+
+## 形式文法
 
 {{csssyntax}}
 
-<h2 id="Example" name="Example">例</h2>
+## 例
 
-<p>以下の例で <code>animation-fill-mode</code> の効果を見ることができます。これは無限に繰り返されるアニメーションが、元の状態に戻るのではなく最後の状態を維持するようにすることができます（既定の状態）。</p>
+以下の例で `animation-fill-mode` の効果を見ることができます。これは無限に繰り返されるアニメーションが、元の状態に戻るのではなく最後の状態を維持するようにすることができます（既定の状態）。
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;p&gt;マウスを灰色のボックスの上に乗せてください！&lt;/p&gt;
-&lt;div class="demo"&gt;
- &lt;div class="growsandstays"&gt;これは大きくなって大きいままになります。&lt;/div&gt;
-  &lt;div class="grows"&gt;これは大きくなるだけです。&lt;/div&gt;
-&lt;/div&gt;</pre>
+```html
+<p>マウスを灰色のボックスの上に乗せてください！</p>
+<div class="demo">
+  <div class="growsandstays">これは大きくなって大きいままになります。</div>
+  <div class="grows">これは大きくなるだけです。</div>
+</div>
+```
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">.demo {
+```css
+.demo {
   border-top: 100px solid #ccc;
   height: 300px;
 }
@@ -146,40 +113,24 @@ animation-fill-mode: both, forwards, none;
   animation-name: grow;
   animation-duration: 3s;
   animation-fill-mode: forwards;
-}</pre>
+}
+```
 
-<p>{{EmbedLiveSample('Example',700,300)}}</p>
+### 結果
 
-<p>これ以外の例は <a href="/ja/docs/Web/CSS/CSS_Animations/Using_CSS_animations" title="CSS/CSS animations">CSS アニメーション</a>を参照してください。</p>
+{{EmbedLiveSample('Examples',700,300)}}
 
-<h2 id="Specifications" name="Specifications">仕様書</h2>
+これ以外の例は [CSS アニメーション](/ja/docs/Web/CSS/CSS_Animations/Using_CSS_animations)を参照してください。
 
-<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-fill-mode', 'animation-fill-mode')}}</td>
-   <td>{{Spec2('CSS3 Animations')}}</td>
-   <td>初回定義</td>
-  </tr>
- </tbody>
-</table>
+## 仕様書
 
-<p>{{cssinfo}}</p>
+{{Specifications}}
 
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+## ブラウザーの互換性
 
-<p>{{Compat("css.properties.animation-fill-mode")}}</p>
+{{Compat}}
 
-<h2 id="See_also" name="See_also">関連情報</h2>
+## 関連情報
 
-<ul>
- <li><a href="/ja/docs/Web/CSS/CSS_Animations/Using_CSS_animations" title="Tutorial about 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