3次ベジェ イージング ジェネレーター
3次ベジェ ジェネレーター
3次ベジェ ジェネレーター：イージング曲線をドラッグしてCSSをコピー | We.Inc
2つのハンドルをドラッグしてcubic-bezier()のイージング曲線を作り、linearやeaseと競争させて比べ、仕様のキーワードやTailwindのプリセットから始めて、CSSやTailwindのクラスをコピーできます。
cubic-bezier(x1, y1, x2, y2)のイージング曲線は0,0から1,1まで伸び、2つの制御点によって曲げられます。x値はどちらも0から1の間に収める必要があり、外れるとブラウザーは宣言全体を無視します。一方y値は0未満や1超えにでき、行き過ぎる動きを表現できます。下のハンドルをドラッグして、点が競争する様子を見てみましょう。
CSSのイージングキーワードをcubic-bezier()の値で表したもの（CSS Easing Functions Level 1）
- キーワード
- cubic-bezier()の値
- 動きの印象
- cubic-bezier(0, 0, 1, 1)
- 一定の速さで、機械的
- ease（デフォルト）
- cubic-bezier(0.25, 0.1, 0.25, 1)
- 素早く動き出し、ゆっくり長く止まる
- cubic-bezier(0.42, 0, 1, 1)
- ゆっくり始まり、急に止まる
- cubic-bezier(0, 0, 0.58, 1)
- 速く始まり、やわらかく着地する
- cubic-bezier(0.42, 0, 0.58, 1)
- 両端がやわらかい
4つの数字を入力して、どんな動きになるかを想像するのはなかなかうまくいきません。ここでは手で曲線を形作り、数字が更新されるのを確認し、スタイルシートに貼り付ける前に、直線やブラウザーのデフォルトと動きを並べて比較できます。
- グラフ上の青とピンクのハンドルをドラッグするか、4つの欄に正確な数値を入力します。x欄は0から1の範囲に制限されます。
- 再生を押すと、あなたの曲線、linear、easeの3つの点が同時にトラックを走ります。
- プリセットを選ぶと、仕様のキーワード、Tailwindのデフォルト、または当サイトのオーバーシュート曲線から始められます。
- CSSの宣言か、Tailwindの任意値クラスをコピーします。
- 画面に入ってくる要素にはease-out、出ていく要素にはease-inを使いましょう。画面内の2点間を移動する要素には、たいていease-in-outが最も自然に見えます。
- y1を1より大きくすると、動きが目標を通り過ぎてから戻って落ち着きます。インターフェースの動きでは、行き過ぎは1.2から1.6程度の小さめに抑えましょう。
- 短い時間では曲線の違いがわかりにくくなります。600ミリ秒以上で曲線を判断してから、時間を短くしましょう。
- 動きを減らしたい人に配慮し、大きな動きは@media (prefers-reduced-motion: no-preference)で囲みましょう。
よくある質問
cubic-bezier()の4つの数字は何を意味しますか？
2つの制御点の座標です。1つ目がx1とy1、2つ目がx2とy2です。x軸は経過した時間の割合、y軸はアニメーションする値がどこまで進んだかを表します。
cubic-bezierが無視されるのはなぜですか？
どちらかのx値が0未満または1より大きいと関数は無効になり、ブラウザーは宣言を破棄して、それ以前に適用されていた値に戻ります。x1とx2が0から1の間にあるか確認してください。
Tailwindのease-inとease-outはCSSのキーワードと同じですか？
いいえ。Tailwindのデフォルトテーマでは、ease-inをcubic-bezier(0.4, 0, 1, 1)、ease-outをcubic-bezier(0, 0, 0.2, 1)、ease-in-outをcubic-bezier(0.4, 0, 0.2, 1)と定義しており、同名のCSSキーワードとは異なります。エディターには両方がプリセットとして入っているので、比較できます。
Tailwindで独自の曲線を使うには？
ease-[cubic-bezier(0.34,1.56,0.64,1)]のように、角かっこの中にスペースなしで値を書きます。再利用したい場合は、@themeで--ease-springyのようなテーマ変数を宣言すると、Tailwindがease-springyクラスを作成します。
ベジェ曲線で何度も跳ねるバウンドは作れますか？
作れません。1本の3次曲線は1回行き過ぎて戻ることはできますが、何度も跳ねることはできません。複数回跳ねるバウンドには、複数ステップの@keyframesか、点のリストを受け付ける新しいlinear()関数を使います。
グラフの読み方
- 時間は左から右へ、進行度は下から上へ進みます。曲線の急な部分は速い動き、平らな部分は要素がほとんど動いていないことを意味します。角から角への直線は一定速度の動きです。
- 上端より上や下端より下にあるハンドルは、一時的に進行度を100パーセント超えや0パーセント未満にします。こうすることで、キーフレームを書かずにやわらかいオーバーシュートを作れます。
CSSのどこで曲線を使うか
- 同じ値はtransition-timing-function、animation-timing-function、そしてtransitionとanimationの一括指定で使えます。@keyframesの中では、キーフレームに設定したタイミング関数は次のキーフレームまでの区間にだけ適用されます。
- opacityや幅など、0未満にできないプロパティもあります。曲線が0より下に行き過ぎた場合、それらの値は制限されるので、沈み込みはそのまま見えなくなります。
プリセットの値
最初の5つはCSS Easing Functionsの仕様から取っています。Tailwindの行はそのフレームワークのデフォルトテーマです。オーバーシュートの行は、私たちが目で見て調整した出発点です。
エディターのすべてのプリセット
- CSSキーワード
- cubic-bezier(0, 0, 1, 1)
- CSSキーワード
- cubic-bezier(0.25, 0.1, 0.25, 1)
- CSSキーワード
- cubic-bezier(0.42, 0, 1, 1)
- CSSキーワード
- cubic-bezier(0, 0, 0.58, 1)
- CSSキーワード
- cubic-bezier(0.42, 0, 0.58, 1)
- ease-in（Tailwind）
- Tailwindデフォルト
- cubic-bezier(0.4, 0, 1, 1)
- ease-out（Tailwind）
- Tailwindデフォルト
- cubic-bezier(0, 0, 0.2, 1)
- ease-in-out（Tailwind）
- Tailwindデフォルト
- cubic-bezier(0.4, 0, 0.2, 1)
- 弾むアウト
- オーバーシュート
- cubic-bezier(0.34, 1.56, 0.64, 1)
- オーバーシュート
- cubic-bezier(0.6, -0.4, 0.4, 1.4)
- オーバーシュート
- cubic-bezier(0.2, 0.9, 0.3, 1.1)
独自の曲線を使う
オーバーシュートするホバーカード
カードにカーソルを合わせてください。定位置を少し越えて持ち上がってから落ち着きます。すべてタイミング関数だけで実現しています。
Tailwind：単発のクラスと再利用できるテーマトークン
角かっこの形式ではスペースは不要です。@themeの変数を使うと、曲線が名前付きのクラスになります。
イージング曲線エディター
ハンドルをドラッグするか値を入力し、再生を押してあなたの曲線をlinearやeaseと競争させてから、CSSかTailwindのクラスをコピーしましょう。
- CSSキーワード
- CSSキーワード
- CSSキーワード
- CSSキーワード
- CSSキーワード
- Tailwindデフォルト
- Tailwindデフォルト
- Tailwindデフォルト
- オーバーシュート
- オーバーシュート
- オーバーシュート
イージング曲線のグラフ。2つのハンドルをドラッグすると曲線が変わります。
1つ目の制御点
2つ目の制御点
イージングのプリセット
時間：{n} ms
再生
あなたの曲線
CSSをコピー
Tailwindクラスをコピー
この曲線はCSSキーワード{v}と同じです。
x値は0から1の間に収まります。y値は行き過ぎてもかまいません。
無料で始める · クレジットカード不要
関連: 無料ツール｜ビジネス向け計算・生成ツール
製品
ご利用いただける方
機能
リソース
会社情報
サイトマップを見る