CSS Cubic-Bezierジェネレーター - カスタムイージングカーブをオンラインで無料作成

インタラクティブなSVGビジュアライザーとライブアニメーションプレビューでカスタムCSS cubic-bezierイージングカーブを作成

CSSツール

Tool

Presets

x1 (0.25)y1 (0.10)x2 (0.25)y2 (1.00)

Duration (1s)

Animation preview

CSS

transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);

使い方

14つのコントロールポイント値（x1, y1, x2, y2）を0から1の間で調整します
2またはプリセットボタンをクリックします（ease、ease-in、ease-out、ease-in-out、linear）
3スライダーでアニメーション時間を設定します
4アニメーションプレビューでイージングの動きを確認します
5CSSタイミング関数をコピーしてトランジションやアニメーションに使用します

よくある質問

cubic-bezier()は、4つのコントロールポイントを使用してカスタムイージングカーブを定義するCSS関数です。transition-timing-functionやanimation-timing-functionの値として使用されます。

4つの値はカーブの2つのコントロールポイントP1(x1,y1)とP2(x2,y2)を定義します。X値は0から1の間でなければなりませんが、Y値はその範囲を超えることで先行やオーバーシュートの効果を作り出せます。

easeはcubic-bezier(0.25,0.1,0.25,1)、ease-inはcubic-bezier(0.42,0,1,1)、ease-outはcubic-bezier(0,0,0.58,1)、ease-in-outはcubic-bezier(0.42,0,0.58,1)、linearはcubic-bezier(0,0,1,1)です。

はい。@keyframesアニメーションのanimation-timing-functionとして、またはCSSトランジションのtransition-timing-functionとして使用できます。このジェネレーターはtransition-timing-function宣言を出力します。

使い方

14つのコントロールポイント値（x1, y1, x2, y2）を0から1の間で調整します

2またはプリセットボタンをクリックします（ease、ease-in、ease-out、ease-in-out、linear）

3スライダーでアニメーション時間を設定します

4アニメーションプレビューでイージングの動きを確認します

5CSSタイミング関数をコピーしてトランジションやアニメーションに使用します

よくある質問

easeはcubic-bezier(0.25,0.1,0.25,1)、ease-inはcubic-bezier(0.42,0,1,1)、ease-outはcubic-bezier(0,0,0.58,1)、ease-in-outはcubic-bezier(0.42,0,0.58,1)、linearはcubic-bezier(0,0,1,1)です。