3次ベジェ・イージング生成ツール

3次ベジェ・イージングはアニメーションの進捗度を3次ベジェ曲線に沿って変化させます。アニメーションの進行に緩急をつけるために使用できます。

3次ベジェ曲線は始点(“P0”)、第1制御点(“P1”)、第2制御点(“P2”)、終点(“P3”)によって表現され、始点(“P0”)と第1制御点(“P1”)を結ぶ直線と第2制御点(“P2”)と終点(“P3”)を結ぶ直線はそれぞれベジェ曲線の接線となります。始点(“P0”)の座標は常に“(0,0)”、終点(“P3”)の座標は常に“(1,1)”です。

第1制御点(“P1”)と第2制御点(“P2”)の座標を指定することで曲線を変化させることができます。

“X1”と“Y1”は第1制御点(“P1”)の座標、“X2”と“Y2”は第2制御点(“P2”)の座標を指定します。

“X1”と“X2”は“0”以上、“1”以下でなければなりません。

定義済みの3次ベジェ・イージングを選択することもできます。

“linear”はリニア・イージングです。アニメーションは等速で進行します。

このツールでは“Y1”と“Y2”、所要時間は“999”まで入力できます。

このツールでは“Y1”と“Y2”、所要時間は“999”まで入力できます。

このツールでは数値は小数第2位まで入力できます。

生成した3次ベジェ・イージングはCSSの“<cubic-bezier-easing-function>”値(キーワード値か“cubic-bezier()”関数)、もしくは“animation”プロパティ、“transition”プロパティとして出力できます。

アニメーションを試してみるには再生ボタンをクリックしてください。アニメーションは拡大・縮小と水平移動の2種類を切り替えられます。