From fad1bd7b4131705ddeda2436322756738ba57ead Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 23 Jan 2022 00:24:57 +0900 Subject: 2021/08/13 時点の英語版に同期 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ja/web/css/animation-timing-function/index.md | 258 ++++++++++----------- 1 file changed, 120 insertions(+), 138 deletions(-) (limited to 'files/ja') diff --git a/files/ja/web/css/animation-timing-function/index.md b/files/ja/web/css/animation-timing-function/index.md index 88e522c1a0..369bf6465d 100644 --- a/files/ja/web/css/animation-timing-function/index.md +++ b/files/ja/web/css/animation-timing-function/index.md @@ -2,27 +2,26 @@ title: animation-timing-function slug: Web/CSS/animation-timing-function tags: - - Animation - CSS - CSS アニメーション - CSS プロパティ - - Reference - - animation-timing-function + - リファレンス + - recipe:css-property +browser-compat: css.properties.animation-timing-function translation_of: Web/CSS/animation-timing-function --- -
{{CSSRef}}
+{{CSSRef}} -

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

+**`animation-timing-function`** は [CSS](/ja/docs/Web/CSS) のプロパティで、アニメーションがそれぞれの周期の中でどのように進行するかを設定します。 -
{{EmbedInteractiveExample("pages/css/animation-timing-function.html")}}
+{{EmbedInteractiveExample("pages/css/animation-timing-function.html")}} - +アニメーションのプロパティすべてを一度に設定するには、一括指定プロパティである {{cssxref("animation")}} プロパティを使用すると便利です。 -

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

+## 構文 -

構文

- -
/* キーワード値 */
+```css
+/* キーワード値 */
 animation-timing-function: ease;
 animation-timing-function: ease-in;
 animation-timing-function: ease-out;
@@ -49,81 +48,82 @@ 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: revert;
 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")}} プロパティで指定したアニメーションに割り当てられますが、いくつあるかによって異なる方法で割り当てられます。詳しくは、複数のアニメーションプロパティ値の設定を参照してください。

-
+``` + +タイミング関数は [@keyframes](/ja/docs/Web/CSS/@keyframes) ルール内にあるそれぞれのキーフレームに指定されることがあります。キーフレームに **`animation-timing-function`** が指定されていない場合、そのキーフレームにはアニメーションが適用された要素から **`animation-timing-function`** の適切な値が使用されます。 + +キーフレームのタイミング関数は、指定されたキーフレームからそのプロパティを指定する次のキーフレームまで、またはそのプロパティを指定する後続のキーフレームがない場合はアニメーションの終わりまで、プロパティごとに適用されます。結果的に、 **`animation-timing-function`** のうち **`100%`** または **`to`** に指定したものは使用されません。 + +### 値 + +- {{cssxref("<easing-function>")}} + + - : {{cssxref("animation-name")}} で定められた、アニメーションに対応するタイミング関数です。 + + ステップではないキーワード値 (ease, linear, ease-in-out など) は、それぞれ固定の 4 点値を持つ三次ベジェ曲線を表し、 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, )` + + - : 遷移に沿った _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)` と同じです。 + +> **Note:** `animation-*` プロパティにカンマ区切りで複数の値を指定した場合、 {{cssxref("animation-name")}} プロパティで指定したアニメーションに割り当てられますが、いくつあるかによって異なる方法で割り当てられます。詳しくは、[複数のアニメーションプロパティ値の設定](/ja/docs/Web/CSS/CSS_Animations/Using_CSS_animations#setting_multiple_animation_property_values)を参照してください。 + +## 公式定義 + +{{cssinfo}} -

形式文法

+## 形式文法 {{csssyntax}} -

例

+## 例 -
-

二次元ベジェの例

+### 二次元ベジェの例 - +``` -
.ease {
+```css
+.ease {
    animation-timing-function: ease;
 }
 .easein {
@@ -165,27 +165,28 @@ animation-timing-function: unset;
 }
 .cb {
    animation-timing-function: cubic-bezier(0.2,-2,0.8,2);
-}
+} +``` + +{{EmbedLiveSample("Cubic-Bezier_examples", 600, 200)}} -
{{EmbedLiveSample("Cubic-Bezier_examples", 600, 200)}}
+### 段階の例 + +```html hidden +
+
jump-start
+
jump-end
+
jump-both
+
jump-none
+
start
+
end
+
step-start
+
step-end
+``` -
-

段階の例

- - +``` -
.jump-start {
+```css
+.jump-start {
    animation-timing-function: steps(5, jump-start);
 }
 .jump-end {
@@ -233,41 +234,22 @@ animation-timing-function: unset;
 }
 .step-end {
    animation-timing-function: step-end;
-}
+} +``` -
{{EmbedLiveSample("Step_examples", 600, 200)}}
-
+{{EmbedLiveSample("Step_examples", 600, 200)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 -

仕様書

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

{{cssinfo}}

- -

ブラウザーの互換性

- -

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

- -

関連情報

- - +- [CSS アニメーションの使用](/ja/docs/Web/CSS/CSS_Animations/Using_CSS_animations) +- {{cssxref('easing-function')}} +- JavaScript の {{domxref("AnimationEvent")}} API +- [cubic-bezier.com](https://cubic-bezier.com) -- cgit v1.2.3-54-g00ecf