CSS Easing ジェネレーター
ベジェ曲線エディター
アニメーションプレビュー
一般的なイージング効果
無料オンライン CSS easing ジェネレーター。制御点をドラッグして cubic-bezier 曲線を作成。ease / ease-in / ease-out / ease-in-out / linear プリセット内蔵。リアルタイムアニメーションプレビュー。
ヒントとコツ
制御点をドラッグ
曲線上の2つの制御点（P1、P2）を直接ドラッグして、イージング曲線をリアルタイムで調整します。X軸は時間の経過を、Y軸はプロパティの変化を表し、曲線の傾きがアニメーションの速度変化を決定します。
アニメーションライブプレビュー
「アニメーションを再生」をクリックして、イージング関数の軌道に沿ってボールがどのように動くかを確認してください。プログレスバーが時間の経過を直感的に表示します。
ワンクリックコピー CSS
調整後、「コピー」ボタンをクリックすると、CSS cubic-bezier() コードが自動的にクリップボードにコピーされ、プロジェクトに直接貼り付けることができます。
一般的な使用例
エントランスアニメーション
ease-out
エグジットアニメーション
ease-in
トランジション
ease-in-out
ホバーエフェクト
カスタムカーブ
プログレスインジケーター
linear
よくある質問
cubic-bezier とは何ですか？
cubic-bezier は、2つの制御点 P1 (x1, y1) と P2 (x2, y2) を通る3次ベジェ曲線でアニメーションの速度曲線を定義するCSS関数です。曲線のX軸は時間の経過（0→1）、Y軸はプロパティの変化（0→1）を表します。曲線が急なほど速度が速く、緩やかなほど速度が遅くなります。
CSSでカスタムイージングを使用するにはどうすればよいですか？
CSSのtransitionまたはanimationプロパティで直接使用します：transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);。ジェネレーターのコード出力領域が自動的に正しいCSSコードを生成します。コピーをクリックして直接貼り付けて使用してください。
XとYの有効範囲は？
CSS cubic-bezier() は、X値が0から1の間（開始から終了までの時間に対応）であることを要求し、Y値は通常0から1の間ですが、その範囲を超えることもできます（バウンス効果を作成するため）。このツールは、生成された曲線が有効なCSSイージング関数であることを保証するために、Xを[0、1]、Yを[0、1]に制限します。
プリセットイージングの違いは何ですか？
ease：速い→遅い→速い、一般的なトランジションに適しています。
ease-in：遅い→速い、エグジットアニメーション（要素が離れる）に適しています。
ease-out：速い→遅い、エントランスアニメーション（要素が入る）に適しており、最も一般的に使用されるイージングです。
ease-in-out：両端が遅く中央が速く、easeよりも滑らかです。
linear：一定の速度、加速を必要としないアニメーションに適しています。