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

1 files changed, 34 insertions, 60 deletions

diff --git a/files/ja/web/css/css_animations/index.md b/files/ja/web/css/css_animations/index.md
index 99752edb8d..b5e5b426cc 100644
--- a/files/ja/web/css/css_animations/index.md
+++ b/files/ja/web/css/css_animations/index.md
@@ -4,80 +4,54 @@ slug: Web/CSS/CSS_Animations
 tags:
   - CSS
   - CSS アニメーション
-  - Overview
-  - Reference
+  - ガイド
+  - 概要
+  - リファレンス
 translation_of: Web/CSS/CSS_Animations
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p><ruby><strong>CSS アニメーション</strong><rp> (</rp><rt>CSS Animations</rt><rp>) </rp></ruby>は CSS のモジュールの一つで、時間の経過とキーフレームによって CSS プロパティの値を動かすことができます。キーフレームアニメーションの動作は、タイミング関数、時間、繰り返し回数、その他の属性によって制御されます。</p>
+**CSS アニメーション** (CSS Animations) は CSS のモジュールの一つで、時間の経過とキーフレームによって CSS プロパティの値を動かすことができます。キーフレームアニメーションの動作は、タイミング関数、時間、繰り返し回数、その他の属性によって制御されます。
 
-<h2 id="Reference" name="Reference">リファレンス</h2>
+## リファレンス
 
-<h3 id="CSS_Properties" name="CSS_Properties">CSS プロパティ</h3>
+### CSS プロパティ
 
-<div class="index">
-<ul>
- <li>{{cssxref("animation")}}</li>
- <li>{{cssxref("animation-delay")}}</li>
- <li>{{cssxref("animation-direction")}}</li>
- <li>{{cssxref("animation-duration")}}</li>
- <li>{{cssxref("animation-fill-mode")}}</li>
- <li>{{cssxref("animation-iteration-count")}}</li>
- <li>{{cssxref("animation-name")}}</li>
- <li>{{cssxref("animation-play-state")}}</li>
- <li>{{cssxref("animation-timing-function")}}</li>
-</ul>
-</div>
+- {{cssxref("animation")}}
+- {{cssxref("animation-delay")}}
+- {{cssxref("animation-direction")}}
+- {{cssxref("animation-duration")}}
+- {{cssxref("animation-fill-mode")}}
+- {{cssxref("animation-iteration-count")}}
+- {{cssxref("animation-name")}}
+- {{cssxref("animation-play-state")}}
+- {{cssxref("animation-timing-function")}}
 
-<h3 id="CSS_At-rules" name="CSS_At-rules">CSS @-規則</h3>
+### アットルール
 
-<div class="index">
-<ul>
- <li>{{cssxref("@keyframes")}}</li>
-</ul>
-</div>
+- {{cssxref("@keyframes")}}
 
-<h2 id="Guides" name="Guides">ガイド</h2>
+## ガイド
 
-<dl>
- <dt><a href="/ja/docs/Web/CSS/CSS_Animations/Detecting_CSS_animation_support">CSS アニメーション対応の検出</a></dt>
- <dd>ブラウザーが CSS アニメーションに対応しているかを検出するテクニックを説明します。</dd>
- <dt><a href="/ja/docs/Web/CSS/CSS_Animations/Using_CSS_animations">CSS アニメーションの使用</a></dt>
- <dd>CSS を使用してアニメーションを作成する方法についての一歩一歩進むチュートリアルです。この記事では、関連する CSS プロパティと @-規則、それに互いにどのように関係するのかを説明します。</dd>
- <dt><a href="/ja/docs/Web/CSS/CSS_Animations/Tips">CSS アニメーションのコツとトリック</a></dt>
- <dd>CSS アニメーションを引き出すのに役立つコツやトリックです。現在、 API に対応が備わっていない、すでに完了に向けて実行されているアニメーションを再び再生するテクニックを紹介しています。</dd>
-</dl>
+- [CSS アニメーション対応の検出](/ja/docs/Web/CSS/CSS_Animations/Detecting_CSS_animation_support)
+  - : ブラウザーが CSS アニメーションに対応しているかを検出するテクニックを説明します。
+- [CSS アニメーションの使用](/ja/docs/Web/CSS/CSS_Animations/Using_CSS_animations)
+  - : CSS を使用してアニメーションを作成する方法についての一歩一歩進むチュートリアルです。この記事では、関連する CSS プロパティとアットルール、それに互いにどのように関係するのかを説明します。
+- [CSS アニメーションのコツとトリック](/ja/docs/Web/CSS/CSS_Animations/Tips)
+  - : CSS アニメーションを引き出すのに役立つコツやトリックです。現在、 API に対応が備わっていない、すでに完了に向けて実行されているアニメーションを再び再生するテクニックを紹介しています。
 
-<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') }}</td>
-   <td>{{ Spec2('CSS3 Animations') }}</td>
-   <td>初回定義</td>
-  </tr>
- </tbody>
-</table>
+| 仕様書                            | 状態                           | 備考     |
+| --------------------------------- | ------------------------------ | -------- |
+| {{ SpecName('CSS3 Animations') }} | {{ Spec2('CSS3 Animations') }} | 初回定義 |
 
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+## ブラウザーの互換性
 
-<h3 id="animation_プロパティ"><code>animation</code> プロパティ</h3>
+### `animation` プロパティ
 
-<div>
-<p>{{Compat("css.properties.animation")}}</p>
-</div>
+{{Compat("css.properties.animation")}}
 
-<h2 id="See_also" name="See_also">関連情報</h2>
+## 関連情報
 
-<ul>
- <li>CSS アニメーションに関連して、 <a href="/ja/docs/Web/CSS/CSS_Transitions">CSS トランジション</a>はユーザーの操作に基づいてアニメーションを起動することができます。</li>
-</ul>
+- CSS アニメーションに関連して、 [CSS トランジション](/ja/docs/Web/CSS/CSS_Transitions)は、ユーザーの操作に基づいてアニメーションを起動することができます。