📈 キュービックベジェ イージング生成ツール

4つの制御値(x1・y1・x2・y2)で、CSSアニメーションの加速・減速カーブ(cubic-bezier)を作成できます。イージングカーブのグラフと実際に動くプレビューを見ながら感覚をつかみ、transitionやtiming-functionのCSSをそのままコピーできます。

使い方

1. ease-in-outやback-outなどのプリセットを押して出発点を決めます。
2. x1・y1・x2・y2のスライダー(または数値入力)でカーブを細かく調整します。
3. カーブのグラフと往復する図形のプレビューで動きを確認します。
4. 再生時間を決めてから、transitionまたはtiming-functionのCSSをコピーします。

よくある質問

y値が1より大きい、または0より小さくてもいいですか?

はい。x値は時間軸なので0～1の範囲でなければなりませんが、y値は進行度なので1を超えたり0を下回ったりできます。このとき目標地点を通り過ぎて戻ってくる「オーバーシュート(バウンド)」効果が生まれます。

プレビューの動きは実際と同じですか?

プレビューはブラウザの実際のCSS transitionでレンダリングするため、同じブラウザでサイトに適用したときとまったく同じ動きになります。図形が左右に繰り返し往復して、カーブの加速・減速を示します。

transitionとtiming-functionのどちらをコピーすべきですか?

再生時間まで含めた一行が必要ならtransitionコピーを、イージングカーブだけを別のルールに入れたいならtiming-functionコピーを使ってください。どちらの値も参考用の近似ではなく、そのまま使える正確なCSSです。