カテゴリー: 開発ツール
三次ベジェジェネレーター
独自のCSSイージングカーブをデザインする
2つの制御点をドラッグして cubic-bezier() のタイミング関数を作ります。曲線と動きのプレビューはその場で更新され、完成した animation-timing-function の宣言をコピーできます。曲線の計算はブラウザ内で行われます。
プリセット
所要時間の50%地点における進捗: 0.802
出力
animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
このページの処理はすべてブラウザ内で行われます。アップロードは一切ありません。
このツールでできること
CSSのトランジションやアニメーションのイージングは、(0,0) から (1,1) までの三次ベジェ曲線です。間にある2つの制御点が、動き出しを遅くして最後を速くするか、行き過ぎ（オーバーシュート）を作るか、あるいは他の動きにするかを決めます。ease や ease-in-out といった名前付きキーワードは、この空間の中の5つの固定点にすぎません。このツールは設定した2つの制御点から曲線を描き、そのタイミング関数そのままで動くボックスを表示し、折り返し地点（所要時間の50%）でイージング後の進捗がどこまで進んでいるか、曲線だけでは最も分かりにくい数値を示します。
使い方
- プリセットから始めるか、2つの制御点を直接設定します。
- 曲線と動きのプレビューが更新される様子を確認します。
- cubic-bezier() の宣言を、トランジションやアニメーションにコピーします。
プライバシー
このツールはすべてブラウザ内で動作します。入力した内容がアップロード・保存・共有されることはなく、タブを閉じれば消えます。
よくある質問
- 何かがサーバー側で計算されますか。
- いいえ。曲線・動きのプレビュー・進捗の数値は、すべてページ内で動作するJavaScriptによって計算されます。
- 2つのX値が0から1の間に制限されているのはなぜですか。
- Xは経過時間を表しており、CSSの仕様では曲線が時間の関数として成立するために、Xが0から1へ向かって進むことが求められています。Yはイージング後の進捗を表し、オーバーシュートやバウンスを作るために0未満や1を超える値も許されています。
- 折り返し地点の数値は何を意味しますか。
- アニメーションの所要時間のちょうど半分が経過した時点での、直線的な進捗ではなくイージング後の進捗です。この時点で50%を超えていれば、動きは中間点までに直線的なペースより先行していることになります。