“cubic-bezier()”関数

“cubic-bezier()”関数

“cubic-bezier()”関数は入力値を3次ベジェ曲線に沿って変化させて出力するイージング関数です。

“<cubic-bezier-easing-function>”値として使用することができ、“animation-timing-function”プロパティや“transition-timing-function”プロパティでアニメーションの進行速度を制御することができます。

引数は第1制御点と第2制御点の座標を表す4個の数値をコンマ(“,”)で区切って記述します。

最初の2個の引数は第1制御点(“P1”)のx座標とy座標を表す“<number>”値を順に記述します。

次の2個の引数は第2制御点(“P2”)のx座標とy座標を表す“<number>”値を順に記述します。

x座標を指定する1個目の引数と3個目の引数は“0”以上、“1”以下でなければなりません。そうでなければ値は無効となります。

y座標を指定する2個目の引数と4個目の引数は数値の範囲に制約はありません。y座標を指定する引数に“0”よりも小さい、もしくは“1”よりも大きい数を指定した場合には出力値が減少したり、出力値が“0”以下もしくは“1”以上になることがあります。

3次ベジェ曲線の例

以下は“<cubic-bezier-easing-function>”値のあらかじめ定義されているキーワード値の3次ベジェ曲線です。

使用例

.sample-box-1 { animation-timing-function: cubic-bezier(0,0,1,1);}
.sample-box-2 { animation-timing-function: cubic-bezier(0,0.5,0.5,0);}
.sample-box-3 { animation-timing-function: cubic-bezier(0,1,0,0);}
.sample-box-4 { animation-timing-function: cubic-bezier(0,0,1,0);}
.sample-box-5 { animation-timing-function: cubic-bezier(1,0.25,0,0.75);}
.sample-box-6 { animation-timing-function: cubic-bezier(0.5,1.5,0.5,-1);}
.sample-box-7 { animation-timing-function: cubic-bezier(0,-1,1,2);}


"cubic-bezier(0,0,1,1)"

"cubic-bezier(0,0.5,0.5,0)"

"cubic-bezier(0,1,0,0)"

"cubic-bezier(0,0,1,0)"

"cubic-bezier(1,0.25,0,0.75)"

"cubic-bezier(0.5,1.5,0.5,-1)"

"cubic-bezier(0,-1,1,2)"

＊マウスをホバーしている間にアニメーションが適用されます

仕様書

定義されている仕様書

cubic-bezier()