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

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

記事Sep.4th, 2022
CSSのアニメーションや遷移効果で使用できる“cubic-bezier()”関数のジェネレーター
このツールについて

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”)の座標を指定することで曲線を変化させることができます。

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

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

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

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

“ease”
“ease-in”
“ease-out”
“ease-in-out”

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

リニア・イージング関数

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

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

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

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

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

Name
P1
X1
Y1
P2
X2
Y2
Duration
一番上へ