cubic-bezierジェネレーター（CSSイージング）
コントロールポイントをドラッグして、cubic-bezierのアニメーション曲線を描きます。ease、ease-in-outなどの用意された曲線と比較し、トランジションのCSSをコピーできます。
使い方cubic-bezier曲線エディター
あなたの曲線
リニア
利用できる言語: 
広告
cubic-bezierジェネレーター（CSSイージング）: 用途
グラフ上の2つのコントロールポイントをドラッグするか、ease、バネ、予備動作などの用意された曲線を選びます。長さを調整し、transitionやanimationのCSSをコピーする前に、ご自身の曲線のアニメーションをリニアと比較できます。
使い方
- テンプレートを選ぶか、ポイントをドラッグします。
- 長さを設定して、アニメーションをテストします。
- CSSをコピーします。
使うタイミング
- インターフェースでより自然なアニメーションを作る。
- メニューやモーダルのトランジションを調整する。
- イージング関数を学ぶ。
よくある質問
cubic-bezierとは何ですか？
CSSのトランジションやアニメーションの加速を定める関数です。4つの数値は、2つのコントロールポイントのx座標とy座標です。xは0から1で、yはこの範囲を超えて、バネのような効果を作れます。
インターフェースにはどの曲線を使えばよいですか？
画面に入ってくる要素には、cubic-bezier(0.22, 1, 0.36, 1)のように最後に減速する曲線のほうが自然に見えます。画面から出る要素には、ease-inのように加速する曲線がおすすめです。
本当に無料？
はい、100%無料です。登録不要、サブスクなし、利用制限なし。すべてのツール：Tools123は無料です。