Cubic-Bézierイージングエディター
ドラッグ操作のエディターとライブアニメーションプレビューで、カスタムのcubic-bezierイージングカーブをデザインできます。
カーブエディター
2つのハンドルをドラッグしてイージングカーブを調整します。
アニメーションプレビュー
イージングあり
リニア
塗りつぶし
1.2s
制御点
制御点 1
制御点 2
プリセット
値
cubic-bezier(0, 0, 1, 1)
CSS出力
transition-timing-function: —;
animation-timing-function: —;
すべてブラウザ内で動作します — アップロードは一切ありません。
Cubic-Bézierイージングエディターについて
Cubic-Bézierイージングエディターは、CSSのトランジションやアニメーション用にカスタムのタイミング関数を設計します。カーブキャンバス上の2つのコントロールハンドルをドラッグすると、cubic-bezier(x1, y1, x2, y2)の値がリアルタイムで更新されます。アニメーションプレビューでは、そのイージングを線形の参照と並べて再生し、違いを体感できます。デュレーションも調整可能で、即座に再生し直せます。
10種類のプリセットが、標準的なease、ease-in、ease-out、ease-in-outから、終点を越えてオーバーシュートするbackやanticipateのような表現豊かなカーブ、マテリアルデザイン風のaccelerateとdecelerateのランプまで、一般的なボキャブラリーをカバーしています。そのまま使うことも、ドラッグして自分好みに調整する出発点として使うこともできます。
正確なコントロールポイントの座標を直接入力したり、ランダム化でひらめきを得たり、cubic-bezier()の値だけ、あるいはそのまま貼り付けられるCSSルールをコピーしたりできます。エディター全体がブラウザ内で動作します。
Cubic-Bézierイージングエディターの使い方
- カーブエディター上の2つのハンドルをドラッグして、イージングを形作ります。
- Replayをクリックし、イージングされたアニメーションを線形の参照と比較しながら、必要に応じてデュレーションを調整します。
- ease、back、anticipate、materialなどのプリセットを試して、素早く出発点を見つけます。
- 数値のコントロールポイント入力で微調整し、正確な値にします。
- cubic-bezier()の値、または完全なCSSスニペットをコピーします。
よくある質問
これらは2つのコントロールポイントの座標、x1、y1、x2、y2です。x軸は時間(0から1)、y軸はアニメーションの進行度です。序盤にy値が高く引っ張られると動きは速く始まり、低く引っ張られるとゆっくり始まります。
y値はできます。1を超えるyは、アニメーションが目標をオーバーシュートしてから戻ることを意味し、「back」や「anticipate」のプリセットはまさにこれを行います。x値は時間が逆行できないため、0から1の間に留まる必要があります。
CSSのtransition-timing-functionやanimation-timing-function、Web Animations APIのeasingオプションで使えます。ease-in-outのようなキーワードを、自分のインターフェースに合わせて調整したカーブに置き換えられます。
画面に入ってくる要素や入力に反応する要素にはease-out(速く始まり、穏やかに止まる)を使うと即応性が感じられます。画面から出ていく要素にはease-inを使います。両端が見える動きにはease-in-outが適しています。
はい、アカウント不要で無料です。すべてブラウザ内で完結するため、あなたがデザインしたものはアップロードされません。
人気の検索
cubic-bezier イージング エディター
cubic-bezier ジェネレーター CSS
CSS イージング関数 ジェネレーター
CSS transition タイミング関数
アニメーション イージングカーブ エディター
カスタム ベジェ曲線 CSS
ease-in-out cubic-bezier
お困りですか？
このツールで問題が見つかりましたか？チームにお知らせください。