From aa1a762f4f9e60db126556230fa28e0035ca75f8 Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Tue, 1 Feb 2022 22:45:16 +0900
Subject: 2021/08/13 時点の英語版に同期
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 files/ja/web/css/css_motion_path/index.md | 82 +++++++++++++------------------
 1 file changed, 33 insertions(+), 49 deletions(-)

(limited to 'files')

diff --git a/files/ja/web/css/css_motion_path/index.md b/files/ja/web/css/css_motion_path/index.md
index f5e78b586c..a9de3c0121 100644
--- a/files/ja/web/css/css_motion_path/index.md
+++ b/files/ja/web/css/css_motion_path/index.md
@@ -3,26 +3,28 @@ title: CSS モーションパス
 slug: Web/CSS/CSS_Motion_Path
 tags:
   - CSS
-  - CSS Motion Path
-  - Experimental
-  - Guide
-  - Motion Path
-  - Overview
-  - Reference
+  - CSS モーションパス
+  - 実験的
+  - ガイド
+  - モーションパス
+  - 概要
+  - リファレンス
 translation_of: Web/CSS/CSS_Motion_Path
 ---
-<div>{{CSSRef}}{{seecompattable}}</div>
+{{CSSRef}}{{SeeCompatTable}}
 
-<p><ruby><strong>モーションパス</strong><rp> (</rp><rt>Mortion Path</rt><rp>) </rp></ruby>は CSS のモジュールの一つで、任意のグラフィックオブジェクトを独自の経路に沿って動作させるためのものです。</p>
+**モーションパス** (Mortion Path) は CSS のモジュールの一つで、任意のグラフィックオブジェクトを独自の経路に沿って動作させるためのものです。
 
-<p>この概念は、ある経路に従って動作する要素をアニメーションさせたい場合、以前は裁量権がアニメーションの推移や位置などしかなかったのですが、これは理想的はなく、単純な動作しかできませんでした。 {{cssxref("offset-path")}} によって、任意の形状の特定の経路を定義することができます。そして、 {{cssxref("offset-distance")}} により経路に沿って動かすことができ、 {{cssxref("offset-rotate")}} を用いて任意の位置での向きを選択することができます。</p>
+この概念は、ある経路に従って動作する要素をアニメーションさせたい場合、以前は裁量権がアニメーションの推移や位置などしかなかったのですが、これは理想的はなく、単純な動作しかできませんでした。 {{cssxref("offset-path")}} によって、任意の形状の特定の経路を定義することができます。そして、 {{cssxref("offset-distance")}} により経路に沿って動かすことができ、 {{cssxref("offset-rotate")}} を用いて任意の位置での向きを選択することができます。
 
-<h2 id="Basic_example" name="Basic_example">基本的な例</h2>
+## 基本的な例
 
-<pre class="brush: html notranslate">&lt;div id="motion-demo"&gt;&lt;/div&gt;
-</pre>
+```html
+<div id="motion-demo"></div>
+```
 
-<pre class="brush: css notranslate">#motion-demo {
+```css
+#motion-demo {
   offset-path: path('M20,20 C20,100 200,0 200,100');
   animation: move 3000ms infinite alternate ease-in-out;
   width: 40px;
@@ -37,48 +39,30 @@ translation_of: Web/CSS/CSS_Motion_Path
   100% {
     offset-distance: 100%;
   }
-}</pre>
+}
+```
 
-<p>{{EmbedLiveSample('Basic_example', '100%', 150)}}</p>
+{{EmbedLiveSample('Basic_example', '100%', 150)}}
 
-<h2 id="Reference" name="Reference">リファレンス</h2>
+## リファレンス
 
-<h3 id="Properties" name="Properties">プロパティ</h3>
+### プロパティ
 
-<div class="index">
-<ul>
- <li>{{cssxref("offset")}}</li>
- <li>{{cssxref("offset-anchor")}}</li>
- <li>{{cssxref("offset-distance")}}</li>
- <li>{{cssxref("offset-path")}}</li>
- <li>{{cssxref("offset-position")}}</li>
- <li>{{cssxref("offset-rotate")}}</li>
-</ul>
-</div>
+- {{cssxref("offset")}}
+- {{cssxref("offset-anchor")}}
+- {{cssxref("offset-distance")}}
+- {{cssxref("offset-path")}}
+- {{cssxref("offset-position")}}
+- {{cssxref("offset-rotate")}}
 
-<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('Motion Path Level 1')}}</td>
-   <td>{{Spec2('Motion Path Level 1')}}</td>
-   <td>初回定義</td>
-  </tr>
- </tbody>
-</table>
+| 仕様書                                    | 状態                                       | コメント             |
+| ------------------------------------------------ | -------------------------------------------- | ------------------- |
+| {{SpecName('Motion Path Level 1')}} | {{Spec2('Motion Path Level 1')}} | 初回定義 |
 
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+## ブラウザーの互換性
 
-<h3 id="offset_property" name="offset_property">offset プロパティ</h3>
+## offset プロパティ
 
-<div>
-<p>{{Compat("css.properties.offset-path")}}</p>
-</div>
+{{Compat("css.properties.offset-path")}}
-- 
cgit v1.2.3-54-g00ecf