diff options
author | Masahiro FUJIMOTO <mfujimot@gmail.com> | 2022-02-01 22:45:16 +0900 |
---|---|---|
committer | Masahiro FUJIMOTO <mfujimot@gmail.com> | 2022-02-08 23:10:09 +0900 |
commit | aa1a762f4f9e60db126556230fa28e0035ca75f8 (patch) | |
tree | a359e62523a38f5a67d5e6ff81bc0596f7d84a61 /files | |
parent | 2f1914aa3eb5fc6ff658269b791df563fa71b15d (diff) | |
download | translated-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.md | 82 |
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"><div id="motion-demo"></div> -</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")}} |