From 8b42f444c5c10e0abc2b8015a0a68e3798f9bea9 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sat, 22 Jan 2022 22:56:36 +0900 Subject: CSS animations 系のプロパティを移行 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../web/css/animation-timing-function/index.html | 273 --------------------- .../ja/web/css/animation-timing-function/index.md | 273 +++++++++++++++++++++ 2 files changed, 273 insertions(+), 273 deletions(-) delete mode 100644 files/ja/web/css/animation-timing-function/index.html create mode 100644 files/ja/web/css/animation-timing-function/index.md (limited to 'files/ja/web/css/animation-timing-function') diff --git a/files/ja/web/css/animation-timing-function/index.html b/files/ja/web/css/animation-timing-function/index.html deleted file mode 100644 index 88e522c1a0..0000000000 --- a/files/ja/web/css/animation-timing-function/index.html +++ /dev/null @@ -1,273 +0,0 @@ ---- -title: animation-timing-function -slug: Web/CSS/animation-timing-function -tags: - - Animation - - CSS - - CSS アニメーション - - CSS プロパティ - - Reference - - animation-timing-function -translation_of: Web/CSS/animation-timing-function ---- -
{{CSSRef}}
- -

animation-timing-function は CSS のプロパティで、アニメーションがそれぞれの周期の中でどのように進行するかを設定します。

- -
{{EmbedInteractiveExample("pages/css/animation-timing-function.html")}}
- - - -

アニメーションのプロパティすべてを一度に設定するには、一括指定プロパティである {{cssxref("animation")}} プロパティを使用すると便利です。

- -

構文

- -
/* キーワード値 */
-animation-timing-function: ease;
-animation-timing-function: ease-in;
-animation-timing-function: ease-out;
-animation-timing-function: ease-in-out;
-animation-timing-function: linear;
-animation-timing-function: step-start;
-animation-timing-function: step-end;
-
-/* 関数値 */
-animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
-animation-timing-function: steps(4, end);
-
-/* 段階関数のキーワード */
-animation-timing-function: steps(4, jump-start);
-animation-timing-function: steps(10, jump-end);
-animation-timing-function: steps(20, jump-none);
-animation-timing-function: steps(5, jump-both);
-animation-timing-function: steps(6, start);
-animation-timing-function: steps(8, end);
-
-/* 複数のアニメーション */
-animation-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1);
-
-/* グローバル値 */
-animation-timing-function: inherit;
-animation-timing-function: initial;
-animation-timing-function: unset;
-
- -

タイミング関数は @keyframes 規則内にあるそれぞれのキーフレームに指定されることがあります。キーフレームに animation-timing-function が指定されていない場合、そのキーフレームにはアニメーションが適用された要素から animation-timing-function の適切な値が使用されます。

- -

キーフレームのタイミング関数は、指定されたキーフレームからそのプロパティを指定する次のキーフレームまで、またはそのプロパティを指定する後続のキーフレームがない場合はアニメーションの終わりまで、プロパティごとに適用されます。結果的に、 animation-timing-function のうち 100% または to に指定したものは使用されません。

- -

値

- -
-
{{cssxref("<timing-function>")}}
-
-

{{cssxref("animation-name")}} で定められた、アニメーションに対応するタイミング関数です。

- -

ステップではないキーワード値 (easy, linear, ease-in-out など) は、それぞれ固定の 4 点値を持つ 3 次ベジェ曲線を表し、 cubic-bezier() 関数の値で非定義値を指定することができます。ステップタイミング関数は、入力時間を長さが等しい指定された数の間隔に分割します。これは、ステップ数とステップ位置によって定義されます。

-
-
ease
-
cubic-bezier(0.25, 0.1, 0.25, 1.0) と同じで、既定値であり、アニメーションの中央に向けて変化量が増加し、最後に向けて減少します。
-
linear
-
cubic-bezier(0.0, 0.0, 1.0, 1.0) と同じで、等しい速度でアニメーションします。
-
ease-in
-
cubic-bezier(0.42, 0, 1.0, 1.0) と同じで、プロパティのアニメーションの変化の速度はゆっくり始まり、終了まで加速します。
-
ease-out
-
cubic-bezier(0, 0, 0.58, 1.0) と同じで、アニメーションは速く始まり、速度を落としながら続きます。
-
ease-in-out
-
cubic-bezier(0.42, 0, 0.58, 1.0) と同じで、プロパティのアニメーションはゆっくり変化し、速度を上げ、また速度を落とします。
-
cubic-bezier(p1, p2, p3, p4)
-
ユーザー定義の二次元ベジェ曲線で、 p1 と p3 の値は 0 から 1 の間である必要があります。
-
steps(n, <jumpterm>)
-
遷移に沿った n 個の停止点に沿ってアニメーションを表示し、それぞれの停止点を同じ時間の長さで表示します。例えば、 n が 5 の場合、5つの段階があります。アニメーションが停止する点は、以下の jumpterm によって、アメーションに沿って 0%, 20%, 40%, 60%, 80% となるか、 20%, 40%, 60%, 80%, 100% となるか、アニメーションの 0% と 100% の間で5つの停止点を設定するか、 0% と 100% を含む5つの停止点を設定するか (すなわち 0%, 25%, 50%, 75%, 100%)、の何れかを使用します。 -
-
jump-start
-
アニメーションの開始時に最初のジャンプが発生するように、左連続関数を表します。
-
jump-end
-
アニメーションの終了時に最後のジャンプが発生するように、右連続関数を表します。
-
jump-none
-
どちらにもジャンプはありません。代わりに、 0% 位置と 100% 位置の両方で、それぞれ 1/n の間隔を保持します。
-
jump-both
-
0% 位置と 100% 位置の両方で一時停止を含み、アニメーションの反復中に効果的にステップを追加します。
-
start
-
jump-start と同じです。
-
end
-
jump-end と同じです。
-
-
-
step-start
-
steps(1, jump-start) と同じです。
-
step-end
-
steps(1, jump-end) と同じです。
-
- -
-

メモ: animation-* プロパティにカンマ区切りで複数の値を指定した場合、 {{cssxref("animation-name")}} プロパティで指定したアニメーションに割り当てられますが、いくつあるかによって異なる方法で割り当てられます。詳しくは、複数のアニメーションプロパティ値の設定を参照してください。

-
- -

形式文法

- -{{csssyntax}} - -

例

- -
-

二次元ベジェの例

- - - -
.ease {
-   animation-timing-function: ease;
-}
-.easein {
-   animation-timing-function: ease-in;
-}
-.easeout {
-   animation-timing-function: ease-out;
-}
-.easeinout {
-   animation-timing-function: ease-in-out;
-}
-.linear {
-   animation-timing-function: linear;
-}
-.cb {
-   animation-timing-function: cubic-bezier(0.2,-2,0.8,2);
-}
- -
{{EmbedLiveSample("Cubic-Bezier_examples", 600, 200)}}
-
- -
-

段階の例

- - - -
.jump-start {
-   animation-timing-function: steps(5, jump-start);
-}
-.jump-end {
-   animation-timing-function: steps(5, jump-end);
-}
-.jump-none {
-   animation-timing-function: steps(5, jump-none);
-}
-.jump-both {
-   animation-timing-function: steps(5, jump-both);
-}
-.start {
-   animation-timing-function: steps(5, start);
-}
-.end {
-   animation-timing-function: steps(5, end);
-}
-.step-start {
-   animation-timing-function: step-start;
-}
-.step-end {
-   animation-timing-function: step-end;
-}
- -
{{EmbedLiveSample("Step_examples", 600, 200)}}
-
- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS3 Animations', '#animation-timing-function', 'animation-timing-function')}}{{Spec2('CSS3 Animations')}}初回定義
- -

{{cssinfo}}

- -

ブラウザーの互換性

- -

{{Compat("css.properties.animation-timing-function")}}

- -

関連情報

- - diff --git a/files/ja/web/css/animation-timing-function/index.md b/files/ja/web/css/animation-timing-function/index.md new file mode 100644 index 0000000000..88e522c1a0 --- /dev/null +++ b/files/ja/web/css/animation-timing-function/index.md @@ -0,0 +1,273 @@ +--- +title: animation-timing-function +slug: Web/CSS/animation-timing-function +tags: + - Animation + - CSS + - CSS アニメーション + - CSS プロパティ + - Reference + - animation-timing-function +translation_of: Web/CSS/animation-timing-function +--- +
{{CSSRef}}
+ +

animation-timing-function は CSS のプロパティで、アニメーションがそれぞれの周期の中でどのように進行するかを設定します。

+ +
{{EmbedInteractiveExample("pages/css/animation-timing-function.html")}}
+ + + +

アニメーションのプロパティすべてを一度に設定するには、一括指定プロパティである {{cssxref("animation")}} プロパティを使用すると便利です。

+ +

構文

+ +
/* キーワード値 */
+animation-timing-function: ease;
+animation-timing-function: ease-in;
+animation-timing-function: ease-out;
+animation-timing-function: ease-in-out;
+animation-timing-function: linear;
+animation-timing-function: step-start;
+animation-timing-function: step-end;
+
+/* 関数値 */
+animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
+animation-timing-function: steps(4, end);
+
+/* 段階関数のキーワード */
+animation-timing-function: steps(4, jump-start);
+animation-timing-function: steps(10, jump-end);
+animation-timing-function: steps(20, jump-none);
+animation-timing-function: steps(5, jump-both);
+animation-timing-function: steps(6, start);
+animation-timing-function: steps(8, end);
+
+/* 複数のアニメーション */
+animation-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1);
+
+/* グローバル値 */
+animation-timing-function: inherit;
+animation-timing-function: initial;
+animation-timing-function: unset;
+
+ +

タイミング関数は @keyframes 規則内にあるそれぞれのキーフレームに指定されることがあります。キーフレームに animation-timing-function が指定されていない場合、そのキーフレームにはアニメーションが適用された要素から animation-timing-function の適切な値が使用されます。

+ +

キーフレームのタイミング関数は、指定されたキーフレームからそのプロパティを指定する次のキーフレームまで、またはそのプロパティを指定する後続のキーフレームがない場合はアニメーションの終わりまで、プロパティごとに適用されます。結果的に、 animation-timing-function のうち 100% または to に指定したものは使用されません。

+ +

値

+ +
+
{{cssxref("<timing-function>")}}
+
+

{{cssxref("animation-name")}} で定められた、アニメーションに対応するタイミング関数です。

+ +

ステップではないキーワード値 (easy, linear, ease-in-out など) は、それぞれ固定の 4 点値を持つ 3 次ベジェ曲線を表し、 cubic-bezier() 関数の値で非定義値を指定することができます。ステップタイミング関数は、入力時間を長さが等しい指定された数の間隔に分割します。これは、ステップ数とステップ位置によって定義されます。

+
+
ease
+
cubic-bezier(0.25, 0.1, 0.25, 1.0) と同じで、既定値であり、アニメーションの中央に向けて変化量が増加し、最後に向けて減少します。
+
linear
+
cubic-bezier(0.0, 0.0, 1.0, 1.0) と同じで、等しい速度でアニメーションします。
+
ease-in
+
cubic-bezier(0.42, 0, 1.0, 1.0) と同じで、プロパティのアニメーションの変化の速度はゆっくり始まり、終了まで加速します。
+
ease-out
+
cubic-bezier(0, 0, 0.58, 1.0) と同じで、アニメーションは速く始まり、速度を落としながら続きます。
+
ease-in-out
+
cubic-bezier(0.42, 0, 0.58, 1.0) と同じで、プロパティのアニメーションはゆっくり変化し、速度を上げ、また速度を落とします。
+
cubic-bezier(p1, p2, p3, p4)
+
ユーザー定義の二次元ベジェ曲線で、 p1 と p3 の値は 0 から 1 の間である必要があります。
+
steps(n, <jumpterm>)
+
遷移に沿った n 個の停止点に沿ってアニメーションを表示し、それぞれの停止点を同じ時間の長さで表示します。例えば、 n が 5 の場合、5つの段階があります。アニメーションが停止する点は、以下の jumpterm によって、アメーションに沿って 0%, 20%, 40%, 60%, 80% となるか、 20%, 40%, 60%, 80%, 100% となるか、アニメーションの 0% と 100% の間で5つの停止点を設定するか、 0% と 100% を含む5つの停止点を設定するか (すなわち 0%, 25%, 50%, 75%, 100%)、の何れかを使用します。 +
+
jump-start
+
アニメーションの開始時に最初のジャンプが発生するように、左連続関数を表します。
+
jump-end
+
アニメーションの終了時に最後のジャンプが発生するように、右連続関数を表します。
+
jump-none
+
どちらにもジャンプはありません。代わりに、 0% 位置と 100% 位置の両方で、それぞれ 1/n の間隔を保持します。
+
jump-both
+
0% 位置と 100% 位置の両方で一時停止を含み、アニメーションの反復中に効果的にステップを追加します。
+
start
+
jump-start と同じです。
+
end
+
jump-end と同じです。
+
+
+
step-start
+
steps(1, jump-start) と同じです。
+
step-end
+
steps(1, jump-end) と同じです。
+
+ +
+

メモ: animation-* プロパティにカンマ区切りで複数の値を指定した場合、 {{cssxref("animation-name")}} プロパティで指定したアニメーションに割り当てられますが、いくつあるかによって異なる方法で割り当てられます。詳しくは、複数のアニメーションプロパティ値の設定を参照してください。

+
+ +

形式文法

+ +{{csssyntax}} + +

例

+ +
+

二次元ベジェの例

+ + + +
.ease {
+   animation-timing-function: ease;
+}
+.easein {
+   animation-timing-function: ease-in;
+}
+.easeout {
+   animation-timing-function: ease-out;
+}
+.easeinout {
+   animation-timing-function: ease-in-out;
+}
+.linear {
+   animation-timing-function: linear;
+}
+.cb {
+   animation-timing-function: cubic-bezier(0.2,-2,0.8,2);
+}
+ +
{{EmbedLiveSample("Cubic-Bezier_examples", 600, 200)}}
+
+ +
+

段階の例

+ + + +
.jump-start {
+   animation-timing-function: steps(5, jump-start);
+}
+.jump-end {
+   animation-timing-function: steps(5, jump-end);
+}
+.jump-none {
+   animation-timing-function: steps(5, jump-none);
+}
+.jump-both {
+   animation-timing-function: steps(5, jump-both);
+}
+.start {
+   animation-timing-function: steps(5, start);
+}
+.end {
+   animation-timing-function: steps(5, end);
+}
+.step-start {
+   animation-timing-function: step-start;
+}
+.step-end {
+   animation-timing-function: step-end;
+}
+ +
{{EmbedLiveSample("Step_examples", 600, 200)}}
+
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Animations', '#animation-timing-function', 'animation-timing-function')}}{{Spec2('CSS3 Animations')}}初回定義
+ +

{{cssinfo}}

+ +

ブラウザーの互換性

+ +

{{Compat("css.properties.animation-timing-function")}}

+ +

関連情報

+ + -- cgit v1.2.3-54-g00ecf