開発者ツール
Cubic Bezierジェネレーター
ビジュアルエディターでカスタムCSSアニメーションイージング曲線を作成
カーブエディター
X1
Y1
X2
Y2
アニメーションプレビュー
再生時間s
▶
CSS
cubic-bezier(0.250, 0.100, 0.250, 1.000)
transition: all 1s cubic-bezier(0.250, 0.100, 0.250, 1.000); /* or */ animation: yourAnimation 1s cubic-bezier(0.250, 0.100, 0.250, 1.000);
プリセット＆比較
Cubic Bezierジェネレーターとは？
ビジュアルエディターでカスタムCSSアニメーションイージング曲線を作成
Cubic Bezierジェネレーターは、ブラウザで直接動作する無料のオンラインツールです。インストールやサインアップは不要です。すべての処理はデバイス上でローカルに行われ、データのプライバシーとセキュリティが確保されます。
なぜCubic Bezierジェネレーターを使うべきですか？
- ✓100%無料 - 隠れた費用やプレミアム機能はありません
- ✓登録不要 - アカウント作成なしですぐに使えます
- ✓プライバシー重視 - すべての処理はブラウザで行われます。データはサーバーに送信されません
- ✓超高速 - サーバー遅延なしで即座に結果を確認できます
使い方
- 上の入力エリアにテキストを入力または貼り付けてください
- ツールが自動的に入力を処理します
- 結果をコピーするかファイルとしてダウンロードしてください
機能
- ✓インタラクティブなドラッグ＆ドロップカーブエディター
- ✓30以上のイージング関数プリセット
- ✓リアルタイムアニメーションプレビュー
- ✓複数のアニメーションプロパティデモ
- ✓カーブ比較モード
よくある質問
cubic-bezierとは何ですか？
cubic-bezierは、2つの制御点を持つ3次ベジェ曲線を使用して、アニメーションが時間とともにどのように進行するかを定義するCSSタイミング関数です。
制御点は何を意味しますか？
2つの制御点（P1とP2）は曲線の形状を定義します。X値は0から1の間でなければなりませんが、Y値はバウンス効果のためにこの範囲を超えることができます。