From 2f1914aa3eb5fc6ff658269b791df563fa71b15d Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Tue, 1 Feb 2022 22:41:11 +0900 Subject: CSS モーションパスの文書を移行 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/css_motion_path/index.html | 84 ----------------------------- files/ja/web/css/css_motion_path/index.md | 84 +++++++++++++++++++++++++++++ 2 files changed, 84 insertions(+), 84 deletions(-) delete mode 100644 files/ja/web/css/css_motion_path/index.html create mode 100644 files/ja/web/css/css_motion_path/index.md (limited to 'files') diff --git a/files/ja/web/css/css_motion_path/index.html b/files/ja/web/css/css_motion_path/index.html deleted file mode 100644 index f5e78b586c..0000000000 --- a/files/ja/web/css/css_motion_path/index.html +++ /dev/null @@ -1,84 +0,0 @@ ---- -title: CSS モーションパス -slug: Web/CSS/CSS_Motion_Path -tags: - - CSS - - CSS Motion Path - - Experimental - - Guide - - Motion Path - - Overview - - Reference -translation_of: Web/CSS/CSS_Motion_Path ---- -
{{CSSRef}}{{seecompattable}}
- -

モーションパス (Mortion Path) は CSS のモジュールの一つで、任意のグラフィックオブジェクトを独自の経路に沿って動作させるためのものです。

- -

この概念は、ある経路に従って動作する要素をアニメーションさせたい場合、以前は裁量権がアニメーションの推移や位置などしかなかったのですが、これは理想的はなく、単純な動作しかできませんでした。 {{cssxref("offset-path")}} によって、任意の形状の特定の経路を定義することができます。そして、 {{cssxref("offset-distance")}} により経路に沿って動かすことができ、 {{cssxref("offset-rotate")}} を用いて任意の位置での向きを選択することができます。

- -

基本的な例

- -
<div id="motion-demo"></div>
-
- -
#motion-demo {
-  offset-path: path('M20,20 C20,100 200,0 200,100');
-  animation: move 3000ms infinite alternate ease-in-out;
-  width: 40px;
-  height: 40px;
-  background: cyan;
-}
-
-@keyframes move {
-  0% {
-    offset-distance: 0%;
-  }
-  100% {
-    offset-distance: 100%;
-  }
-}
- -

{{EmbedLiveSample('Basic_example', '100%', 150)}}

- -

リファレンス

- -

プロパティ

- -
- -
- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('Motion Path Level 1')}}{{Spec2('Motion Path Level 1')}}初回定義
- -

ブラウザーの互換性

- -

offset プロパティ

- -
-

{{Compat("css.properties.offset-path")}}

-
diff --git a/files/ja/web/css/css_motion_path/index.md b/files/ja/web/css/css_motion_path/index.md new file mode 100644 index 0000000000..f5e78b586c --- /dev/null +++ b/files/ja/web/css/css_motion_path/index.md @@ -0,0 +1,84 @@ +--- +title: CSS モーションパス +slug: Web/CSS/CSS_Motion_Path +tags: + - CSS + - CSS Motion Path + - Experimental + - Guide + - Motion Path + - Overview + - Reference +translation_of: Web/CSS/CSS_Motion_Path +--- +
{{CSSRef}}{{seecompattable}}
+ +

モーションパス (Mortion Path) は CSS のモジュールの一つで、任意のグラフィックオブジェクトを独自の経路に沿って動作させるためのものです。

+ +

この概念は、ある経路に従って動作する要素をアニメーションさせたい場合、以前は裁量権がアニメーションの推移や位置などしかなかったのですが、これは理想的はなく、単純な動作しかできませんでした。 {{cssxref("offset-path")}} によって、任意の形状の特定の経路を定義することができます。そして、 {{cssxref("offset-distance")}} により経路に沿って動かすことができ、 {{cssxref("offset-rotate")}} を用いて任意の位置での向きを選択することができます。

+ +

基本的な例

+ +
<div id="motion-demo"></div>
+
+ +
#motion-demo {
+  offset-path: path('M20,20 C20,100 200,0 200,100');
+  animation: move 3000ms infinite alternate ease-in-out;
+  width: 40px;
+  height: 40px;
+  background: cyan;
+}
+
+@keyframes move {
+  0% {
+    offset-distance: 0%;
+  }
+  100% {
+    offset-distance: 100%;
+  }
+}
+ +

{{EmbedLiveSample('Basic_example', '100%', 150)}}

+ +

リファレンス

+ +

プロパティ

+ +
+ +
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('Motion Path Level 1')}}{{Spec2('Motion Path Level 1')}}初回定義
+ +

ブラウザーの互換性

+ +

offset プロパティ

+ +
+

{{Compat("css.properties.offset-path")}}

+
-- cgit v1.2.3-54-g00ecf