aboutsummaryrefslogtreecommitdiff
path: root/files
diff options
context:
space:
mode:
authorMasahiro FUJIMOTO <mfujimot@gmail.com>2022-02-01 22:45:16 +0900
committerMasahiro FUJIMOTO <mfujimot@gmail.com>2022-02-08 23:10:09 +0900
commitaa1a762f4f9e60db126556230fa28e0035ca75f8 (patch)
treea359e62523a38f5a67d5e6ff81bc0596f7d84a61 /files
parent2f1914aa3eb5fc6ff658269b791df563fa71b15d (diff)
downloadtranslated-content-aa1a762f4f9e60db126556230fa28e0035ca75f8.tar.gz
translated-content-aa1a762f4f9e60db126556230fa28e0035ca75f8.tar.bz2
translated-content-aa1a762f4f9e60db126556230fa28e0035ca75f8.zip
2021/08/13 時点の英語版に同期
Diffstat (limited to 'files')
-rw-r--r--files/ja/web/css/css_motion_path/index.md82
1 files changed, 33 insertions, 49 deletions
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")}}