このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

cubic-bezier()”関数CSS3で追加

記事Aug.29th,2021
値を3次ベジェ曲線に沿って変化させるCSSのイージング関数、“cubic-bezier()”について
この記事はCSS3に対応しています。
この記事はCSS3に対応しています。

cubic-bezier()”関数

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

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

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

cubic-bezier(〚第1制御点のx座標〛,〚第1制御点のy座標〛,〚第2制御点のx座標〛,〚第2制御点のy座標〛)

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

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

“cubic-bezier()”関数のイメージ

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

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

使用例

.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)"
*マウスをホバーしている間にアニメーションが適用されます

仕様書

定義されている仕様書
Level 1
勧告候補(CR)
cubic-bezier()
定義あり
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク