1. Home
  2. CSS3アニメーションタイミング関数のプロパティ

CSS3アニメーションタイミング関数のプロパティ2024 年の最新の入門チュートリアル。このコースでは 例,ブラウザのサポート,タグの定義と指示,文法,オンラインの例,例,例,関連記事, について学習できます。

CSS3アニメーションタイミング関数のプロパティ

例

最初から最後まで同じ速度でアニメーションを再生します：

animation-timing-function:linear;
-webkit-animation-timing-function:linear; /* Safari and Chrome */

»をお試しください
より多くの例については、このページの下で。

ブラウザのサポート

属性
animation-timing-function 43.0
4.0 -webkit-		 10.0 16.0
5.0 -moz-		 9.0
4.0 -webkit-		 30.0
15.0 -webkit-
12.0 -o-

タグの定義と指示

どのようにアニメーションのタイミング関数は、アニメーションのサイクルを完了します指定します。

時間の別のセット量へのCSSスタイルシートからの速度曲線精細映画。

速度曲線を滑らかに変化させるために使用されます。

デフォルト： 楽
継承： いいえ
バージョン： CSS3
JavaScriptシンタックス： オブジェクトobject.style.animationTimingFunction = "線形"

文法

animation-timing-function:value;

数学関数アニメーションタイミング機能の使用、次ベジェ曲線、速度曲線と呼ばれます。 この機能では、独自の値を使用するか、または定義済みの値のいずれかを使用できます。

値 説明 テスト
リニア 同じ速度で最初から最後までアニメーション。 テスト
楽 デフォルト。 アニメは低速で、その後、スピードアップ終了時に遅く始まりました。 テスト
使いやすさで アニメーションは、低速で開始します。 テスト
使いやすさ・アウト アニメ低速終了。 テスト
使いやすさでアウト 低速でアニメーションの開始と終了。 テスト
立方ベジェ（N、N、N、N） 独自の値で立方ベジエ関数で。 可能な値は0から1の値からです。

ヒント：以下の「してみてください」機能が異なる値を使用してみてください。

例

オンラインの例


例

より良好な異なるタイミング関数の値を理解するために、5の異なるdiv要素5つの異なる値のセットが提供されます。

/* W3C and Opera: */
#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}
/* Firefox: */
#div1 {-moz-animation-timing-function: linear;}
#div2 {-moz-animation-timing-function: ease;}
#div3 {-moz-animation-timing-function: ease-in;}
#div4 {-moz-animation-timing-function: ease-out;}
#div5 {-moz-animation-timing-function: ease-in-out;}
/* Safari and Chrome: */
#div1 {-webkit-animation-timing-function: linear;}
#div2 {-webkit-animation-timing-function: ease;}
#div3 {-webkit-animation-timing-function: ease-in;}
#div4 {-webkit-animation-timing-function: ease-out;}
#div5 {-webkit-animation-timing-function: ease-in-out;}

»をお試しください

例

前の例と同じですが、速度曲線立方ベジェ関数で定義されています。

/* W3C and Opera: */
#div1 {animation-timing-function: cubic-bezier(0,0,1,1;}
#div2 {animation-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {animation-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {animation-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {animation-timing-function: cubic-bezier(0.42,0,0.58,1);}
/* Firefox: */
#div1 {-moz-animation-timing-function: cubic-bezier(0,0,1,1;}
#div2 {-moz-animation-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {-moz-animation-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {-moz-animation-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {-moz-animation-timing-function: cubic-bezier(0.42,0,0.58,1);}
/* Safari and Chrome: */
#div1 {-webkit-animation-timing-function: cubic-bezier(0,0,1,1;}
#div2 {-webkit-animation-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {-webkit-animation-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {-webkit-animation-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {-webkit-animation-timing-function: cubic-bezier(0.42,0,0.58,1);}

»をお試しください

関連記事

CSS3のチュートリアル： CSS3アニメーション

ホットチュートリアル

お問い合わせ

CSS3アニメーションタイミング関数のプロパティ
10/30