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

1 files changed, 64 insertions, 74 deletions

diff --git a/files/ja/web/css/@keyframes/index.md b/files/ja/web/css/@keyframes/index.md
index 7d56c3104e..3a1480db3a 100644
--- a/files/ja/web/css/@keyframes/index.md
+++ b/files/ja/web/css/@keyframes/index.md
@@ -2,18 +2,21 @@
 title: '@keyframes'
 slug: Web/CSS/@keyframes
 tags:
-  - '@-規則'
-  - CSS
-  - CSS アニメーション
-  - Reference
   - アニメーション
+  - アットルール
+  - CSS
+  - リファレンス
+browser-compat: css.at-rules.keyframes
 translation_of: Web/CSS/@keyframes
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
+
+**`@keyframes`** は CSS の[アットルール](/ja/docs/Web/CSS/At-rule)で、アニメーションの流れに沿ったキーフレーム（または中間地点）のスタイルを定義することによって、一連の CSS アニメーションの中間ステップを制御します。これにより、アニメーションの中間ステップを[トランジション](/ja/docs/Web/CSS/CSS_Transitions)よりも詳細に制御できます。
 
-<p><span class="seoSummary">CSS の <strong><code>@keyframes</code></strong> <a href="/ja/docs/Web/CSS/At-rule">@-規則</a>は、アニメーションの流れに沿ったキーフレーム (または中間地点) のスタイルを定義することによって、一連の CSS アニメーションの中間ステップを制御します。</span>これにより、アニメーションの中間ステップを <a href="/ja/docs/Web/CSS/CSS_Transitions">CSS トランジション</a>よりも詳細に制御できます。</p>
+## 構文
 
-<pre class="brush: css no-line-numbers">@keyframes slidein {
+```css
+@keyframes slidein {
   from {
     transform: translateX(0%);
   }
@@ -21,61 +24,78 @@ translation_of: Web/CSS/@keyframes
   to {
     transform: translateX(100%);
   }
-}</pre>
+}
+```
+
+### 値
+
+- {{cssxref("custom-ident")}}
+  - : キーフレームのリストを識別する名前。これは CSS 構文で定義されている識別子に適合する必要があります。
+- `from`
+  - : アニメーションの始まりである `0%` を示します。
+- `to`
+  - : アニメーションの終わりである `100%` を示します。
+- {{cssxref("&lt;percentage&gt;")}}
+  - : 指定したキーフレームがアニメーションの中で作動する時間を示すパーセント値です。
 
-<p>JavaScript は、 CSS オブジェクトモデルのインターフェイス {{domxref("CSSKeyframesRule")}} によって <code>@keyframes</code> @-規則にアクセスできます。</p>
+## 解説
 
-<p>キーフレームを使うには、アニメーションとそのキーフレームを一致させるために、 {{ cssxref("animation-name") }} プロパティで指定したものと同じ名前がついた <code>@keyframes</code> 規則を作成します。それぞれの <code>@keyframes</code> 規則は、キーフレームセレクターのスタイルリストを含んでいます。それは、そのキーフレームが作動する時のアニメーションのパーセント値と、そのキーフレームでのスタイルを指定するブロックとで構成されています。</p>
+JavaScript は、 CSS オブジェクトモデルのインターフェイス {{domxref("CSSKeyframesRule")}} によって `@keyframes` アットルールにアクセスできます。
 
-<p>キーフレームは任意の順番で並べることができます。それらは、作動する時を示すパーセント値の順番に従って制御されます。</p>
+キーフレームを使うには、アニメーションとそのキーフレームを一致させるために、 {{ cssxref("animation-name") }} プロパティで指定したものと同じ名前がついた `@keyframes` ルールを作成します。それぞれの `@keyframes` ルールは、キーフレームセレクターのスタイルリストを含んでいます。それは、そのキーフレームが作動する時のアニメーションのパーセント値と、そのキーフレームでのスタイルを指定するブロックとで構成されています。
 
-<h3 id="Valid_keyframe_lists" name="Valid_keyframe_lists">有効なキーフレームのリスト</h3>
+キーフレームは任意の順番で並べることができます。それらは、作動する時を示すパーセント値の順番に従って制御されます。
 
-<p>キーフレーム規則にアニメーションの開始と終了の状態 (<code>0%</code>/<code>from</code> と <code>100%</code>/<code>to</code>) を明示しない場合、ブラウザはその要素の既存のスタイルを開始・終了の状態として用います。これは、その要素を初期状態からアニメーションさせて元に戻すという処理に利用できます。</p>
+### 有効なキーフレームのリスト
 
-<p>キーフレーム規則にアニメーションができないプロパティを含めた場合、そのプロパティは無視されますが、他のアニメーションが可能なプロパティについてはアニメーションが実行されます。</p>
+キーフレームルールにアニメーションの開始と終了の状態 (`0%`/`from` と `100%`/`to`) を明示しない場合、ブラウザーはその要素の既存のスタイルを開始・終了の状態として用います。これは、その要素を初期状態からアニメーションさせて元に戻すという処理に利用できます。
 
-<h3 id="Resolving_duplicates" name="Resolving_duplicates">重複の解決</h3>
+キーフレームルールにアニメーションができないプロパティを含めた場合、そのプロパティは無視されますが、他のアニメーションが可能なプロパティについてはアニメーションが実行されます。
 
-<p>複数のキーフレームに同じ名前が付けられている場合、最後に宣言されたものが使用されます。 <code>@keyframes</code> 規則がカスケード的に継承されることはないため、アニメーションが複数の規則セットによるキーフレームをもとにして行われることはありません。</p>
+### 重複の解決
 
-<p>指定されたアニメーションのタイムオフセットが重複している場合は、 <code>@keyframes</code> 規則内のそのパーセント値を持つすべてのキーフレームがそのフレームに使用されます。 <code>@keyframes</code> 規則の中で、同じパーセント値を指定した複数のキーフレームがカスケード的に継承されます。</p>
+複数のキーフレームに同じ名前が付けられている場合、最後に宣言されたものが使用されます。 `@keyframes` ルールがカスケード的に継承されることはないため、アニメーションが複数のルールセットによるキーフレームをもとにして行われることはありません。
 
-<h3 id="When_properties_are_left_out_of_some_keyframes" name="When_properties_are_left_out_of_some_keyframes">一部のキーフレームでプロパティが指定されていない場合</h3>
+指定されたアニメーションのタイムオフセットが重複している場合は、 `@keyframes` ルール内のそのパーセント値を持つすべてのキーフレームがそのフレームに使用されます。 `@keyframes` ルールの中で、同じパーセント値を指定した複数のキーフレームがカスケード的に継承されます。
 
-<p>一部のキーフレームでしか指定されていないプロパティは、補完されます (ただし、補完することができないプロパティは除きます。このようなプロパティは、アニメーションされません)。例えば:</p>
+### 一部のキーフレームでプロパティが指定されていない場合
 
-<pre class="brush: css">@keyframes identifier {
+一部のキーフレームでしか指定されていないプロパティは、補完されます（ただし、補完することができないプロパティは除きます。このようなプロパティは、アニメーションされません）。
+
+```css
+@keyframes identifier {
   0% { top: 0; left: 0; }
   30% { top: 50px; }
   68%, 72% { left: 50px; }
   100% { top: 100px; left: 100%; }
 }
-</pre>
+```
 
-<p>この例では、 {{ cssxref("top") }} プロパティは <code>0%</code>, <code>30%</code>, <code>100%</code> のキーフレームでアニメーション指定されています。また、 {{ cssxref("left") }} プロパティは <code>0%</code>, <code>68%</code>, <code>72%</code>, <code>100%</code> のキーフレームで指定されています。</p>
+この例では、 {{ cssxref("top") }} プロパティは `0%`, `30%`, `100%` のキーフレームでアニメーション指定されています。また、 {{ cssxref("left") }} プロパティは `0%`, `68%`, `72%`, `100%` のキーフレームで指定されています。
 
-<h3 id="キーフレームが複数宣言された場合">キーフレームが複数宣言された場合</h3>
+### キーフレームが複数宣言された場合
 
-<p>キーフレームが複数宣言されているものの、アニメーションで作用する全てのプロパティがそれぞれのキーフレームに存在するわけではない場合、これらのキーフレームで指定されたすべての値が適用されます。例えば、</p>
+キーフレームが複数宣言されているものの、アニメーションで作用する全てのプロパティがそれぞれのキーフレームに存在するわけではない場合、これらのキーフレームで指定されたすべての値が適用されます。例えば、
 
-<pre class="brush: css">@keyframes identifier {
+```css
+@keyframes identifier {
   0% { top: 0; }
   50% { top: 30px; left: 20px; }
   50% { top: 10px; }
   100% { top: 0; }
 }
-</pre>
+```
 
-<p>この例では、 <code>50%</code> のキーフレームで、使用される値は <code>top: 10px</code> と <code>left: 20px</code> です。</p>
+この例では、 `50%` のキーフレームで、使用される値は `top: 10px` と `left: 20px` です。
 
-<p>カスケード的なキーフレームは Firefox 14 から対応しています。</p>
+カスケード的なキーフレームは Firefox 14 から対応しています。
 
-<h3 id="!important_in_a_keyframe" name="!important_in_a_keyframe">キーフレーム内の <code>!important</code></h3>
+### キーフレーム内の `!important`
 
-<p>キーフレーム内で <code>!important</code> が付けられた宣言は無視されます。</p>
+キーフレーム内で `!important` が付けられた宣言は無視されます。
 
-<pre class="brush: css">@keyframes important1 {
+```css
+@keyframes important1 {
   from { margin-top: 50px; }
   50%  { margin-top: 150px !important; } /* 無視される */
   to   { margin-top: 100px; }
@@ -87,57 +107,27 @@ translation_of: Web/CSS/@keyframes
   to   { margin-top: 150px !important; /* 無視される */
          margin-bottom: 50px; }
 }
-</pre>
-
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<h3 id="Values" name="Values">値</h3>
+```
 
-<dl>
- <dt>{{cssxref("custom-ident")}}</dt>
- <dd>キーフレームのリストを識別する名前。これは CSS 構文規則で定義されている識別子に適合する必要があります。</dd>
- <dt><code>from</code></dt>
- <dd>アニメーションの始まりである <code>0%</code> を示します。</dd>
- <dt><code>to</code></dt>
- <dd>アニメーションの終わりである <code>100%</code> を示します。</dd>
- <dt>{{cssxref("&lt;percentage&gt;")}}</dt>
- <dd>指定したキーフレームがアニメーションの中で作動する時間を示すパーセント値です。</dd>
-</dl>
-
-<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+## 形式文法
 
 {{csssyntax}}
 
-<h2 id="Examples" name="Examples">例</h2>
+## 例
+
+### CSS アニメーションの例
 
-<p><a href="/ja/docs/Web/CSS/CSS_Animations/Using_CSS_animations">CSS アニメーションの利用</a> を参照してください。</p>
+[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', '#keyframes', '@keyframes') }}</td>
-   <td>{{ Spec2('CSS3 Animations') }}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
+{{Specifications}}
 
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+## ブラウザーの互換性
 
-<p>{{Compat("css.at-rules.keyframes")}}</p>
+{{Compat}}
 
-<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>{{domxref("AnimationEvent")}}</li>
-</ul>
+- [CSS アニメーションの使用](/ja/docs/Web/CSS/CSS_Animations/Using_CSS_animations)
+- {{domxref("AnimationEvent")}}