CSSキュービックベジェジェネレーター

コントロールポイントをドラッグして、カスタムCSSイージング関数を作成します。アニメーションをプレビューしてコードをコピーします。

CSSコード

Cubic-bezierとは?

CSS cubic-bezier()は、CSSトランジションとアニメーションのカスタムタイミング関数を定義します。4つの数字はベジェ曲線の2つの点を制御し、ease-inからバウンス効果まで、きめ細かい調整を可能にします。

ベジェ曲線、数学的系譜

曲線は1960年代に Renault 16 のボディパネルの滑らかな線をデザインするためにそれらを使用したフランスのRenaultのエンジニア、Pierre Bézier にちなんで名付けられています、Renault の UNISURF CAD システムの一部として1968年に公開されました。数学は数年前(1959)に Citroën の Paul de Casteljau によって独立して開発されましたが、Citroën は de Casteljau の作業を企業秘密として保持し、Bézier の公開バージョンが標準的な参照になりました。両者は制御点で定義される多項式曲線の同じファミリーに収束しました、与えられたパラメーターでベジェ曲線を評価する de Casteljau のアルゴリズムは未公開のパイオニアにちなんで名付けられています。3次ベジェ曲線はベクトルグラフィックスの普遍的なプリミティブになりました、評価が安価(数回の乗算と加算)、自明にスケーラブル(数学はアフィン変換に対して不変)、ローカルに制御可能(制御点を移動すると近隣の曲線セグメントのみが変わる)。Adobe PostScript(1984)と PDF、SVG 仕様(W3C 勧告 2001年9月)、すべての現代のフォントフォーマットは3次ベジェ曲線を文字、アイコン、イラストの構築ブロックとして使用します。CSS は同じ曲線タイプをアニメーションタイミングに採用しました、視覚デザインの世界の標準数学的プリミティブを動きを記述するという新しいユースケースに借りました。

CSS Animation 仕様とタイミング関数

CSS アニメーションとトランジションの両方が同じファミリーのタイミング関数を使用します。CSS Animations Level 1 仕様は2009年3月に公開ワーキングドラフトとして最初に公開され(以前のプレフィックス付き WebKit 実装から抽出)、W3C CSS Working Group によって維持され続けています。CSS Easing Functions Level 1 モジュールはタイミング関数構文を正式化し、現在 Candidate Recommendation です。5つの名前付きキーワードは特定の cubic-bezier のエイリアスです:ease = cubic-bezier(0.25, 0.1, 0.25, 1)、トランジションの CSS デフォルト、ほとんどの UI モーションに自然に感じる速いスタートと遅い終わり。ease-in = cubic-bezier(0.42, 0, 1, 1)、遅いスタート、速い終わりへ加速。ease-out = cubic-bezier(0, 0, 0.58, 1)、速いスタート、遅い終わりへ減速、ビューポートに入る UI 要素に最も使用される easing。ease-in-out = cubic-bezier(0.42, 0, 0.58, 1)、対称 S 曲線、両端で遅い。linear = cubic-bezier(0, 0, 1, 1)、easing なし、定速、UI には正しい選択ではないが、スピナーのような連続ループアニメーションには適切。CSS は2つの非ベジェタイミングオプションも提供します:ステップ(フレームバイフレーム)アニメーションのための steps(n, jumpterm)、任意の曲線を近似する区分線形関数のための linear()(CSS Easing Level 2 で追加)。

デザインシステムの easing 曲線

主要デザインシステムは CSS デフォルトを上書きする意見の強い easing 曲線を公開します。Google Material Design は「standard easing」を cubic-bezier(0.4, 0, 0.2, 1) として指定します、速い加速、遅い減速、Android と web の Material ライブラリのほとんどの UI トランジションに使用されます;画面に入る要素には「decelerated easing」cubic-bezier(0, 0, 0.2, 1);画面から出る要素には「accelerated easing」cubic-bezier(0.4, 0, 1, 1)。Apple Human Interface Guidelines は固定ベジェ曲線よりもバネ物理アニメーションを強調しますが、iOS の UIKit は約 (0.25, 0.1, 0.25, 1)(CSS の ease と同じ)のデフォルト cubic-bezier を出荷します。IBM の Carbon Design System は productive モーションカテゴリーに cubic-bezier(0.5, 0, 0.1, 1) を使用します。Microsoft Fluent、Atlassian、Salesforce Lightning はすべて独自の曲線を指定します。Robert Penner の easing 方程式(2001年に Flash モーションの本の一部として公開)は、ほぼすべてのアニメーションライブラリが使用する名前付き曲線の語彙を定義しました、easeInQuad、easeOutCubic、easeInOutSine、easeInQuart、easeOutBack、easeInOutBounce、easeInElastic。ほとんどは cubic-bezier として表現できます、elastic と bounce バリアントはできません(振動するので複数部分の区分関数を必要とする)。

用途別の正しい曲線の選択

パフォーマンスに関する考慮

カスタム cubic-bezier タイミング関数は実行時に本質的にコストがかかりません、曲線は定数で、ブラウザは一度ルックアップテーブルをプリコンパイルし、フレームごとの評価は数回の浮動小数点演算です。パフォーマンスの問題はアニメーションするプロパティであり、タイミング曲線ではありません。transform(translate、scale、rotate)と opacity をアニメーションすると GPU コンポジションを使用し、ミドルレンジハードウェアでも 60 または 120 fps で滑らかに保たれます。top、left、width、height、margin、padding、またはレイアウトをトリガーする任意のプロパティをアニメーションすると、最も単純なページを除いてジャンクします、各フレームが完全な reflow をトリガーするからです。「コンポジターフレンドリー」プロパティのリスト(transform + opacity に加えて filter と他のいくつか)は通常の安全なセットです、他のすべては実際のページ負荷下でテストする必要があります。CSS の will-change プロパティはプロパティがアニメーションされることをブラウザに伝え、要素を独自のコンポジティングレイヤーに事前昇格させることを許します、各 will-change が GPU メモリを予約するので控えめに使用してください。

アクセシビリティ、prefers-reduced-motion

前庭障害、注意欠陥状態、または単に個人的な好みを持つユーザーの重要な少数派が、モーションデザインを気を散らしたり積極的に不快に感じたりします。CSS Media Queries Level 5 仕様は prefers-reduced-motion メディア機能を定義します、macOS(System Settings → Accessibility → Display → Reduce motion)、Windows 10+(Settings → Ease of Access → Display)、iOS、Android、ほとんどの主要 Linux デスクトップでシステム設定として公開されます。約 2019 年からの慣習:すべての非必須アニメーションを @media (prefers-reduced-motion: no-preference) { ... } でラップするか、@media (prefers-reduced-motion: reduce) { transition: none !important; animation: none !important; } で逆転します。cubic-bezier 曲線の選択はそれには重要ではありません、仕様はユーザーが好みを表明したときに開発者がアニメーションを無効にするか実質的に短くすることを要求します。現代のデザインシステムドキュメント(Material、Atlassian、GOV.UK)はすべて reduced motion ガイダンスを含みます。

バネ物理、新しい代替

Cubic-bezier タイミング関数は手で調整された曲線に沿った固定継続時間補間としてモーションを記述します。バネ物理はモーションを減衰調和振動子の自然な安定としてモデル化します、質量、剛性、減衰を指定し、バネが静止するまでアニメーションが実行されます。バネは中断可能な UI ジェスチャーにとってより自然に感じます、中断にわたって持続する勢いを持つからです、フライトのフリックジェスチャーを離すと、バネはスナップではなく新しい曲線で目的地まで継続します。Apple の iOS はほとんどのネイティブインタラクションにバネ物理を使用します(エッジでスクロールビューが跳ねる、スワイプのラバーバンド効果)。React Spring(Paul Henschel)、Framer Motion、CSS の linear() easing 関数(サンプリングされたバネ曲線が与えられたとき)はバネセマンティクスを web に持ち込みます。Cubic-bezier は固定継続時間 UI トランジションに依然として正しいツールです、バネはジェスチャー駆動の中断可能なモーションに正しいツールです。このエディタは cubic-bezier を生成します、2026年の UI アニメーション作業の 90% に正しい形式。

このツールに手を伸ばすとき

よくある質問

値は何を表していますか?

値(x1、y1、x2、y2)は2つのコントロールポイントを定義します。X値は0から1の間でなければなりません(時間)が、Y値はオーバーシュートやバウンス効果のためにこの範囲を超えることができます。

デフォルトの CSS easing は何ですか?

CSS トランジション(transition: opacity 300ms;)のデフォルトは ease、cubic-bezier(0.25, 0.1, 0.25, 1) と同等、速いスタート、遅い終わり。CSS アニメーション(animation: foo 1s;)のデフォルトも ease。transition-timing-function または animation-timing-function でオーバーライド。ほとんどの UI モーションでは、ease-out バリアントまたは Material スタイルの減速曲線がデフォルトより気分の良い結果を生成します。

跳ねやオーバーシュート効果を作るには?

y2 を 1 を超えてプッシュ(典型的な値 1.2-1.6)して、曲線が安定する前に目的地を短時間オーバーシュートするようにします。一般的な微妙な跳ねは cubic-bezier(0.34, 1.56, 0.64, 1)。顕著な跳ねには、単一の cubic-bezier ではなくバネ物理またはマルチキーフレームアニメーションが必要です、ベジェ曲線は1つのピークしか持てないので、真の跳ね(複数の振動)は中間ステップでキーフレームを必要とします。

カスタム曲線は名前付きキーワードより遅いですか?

いいえ、名前付きキーワードは特定の cubic-bezier のエイリアスで、同じコードパスで評価されます。パフォーマンスはアニメーションするプロパティ(transform/opacity = GPU 合成で速い、top/left/width のようなレイアウトに影響するプロパティ = reflow のために遅い)に依存し、タイミング曲線ではありません。Cubic-bezier 評価コストは無視できます。

このツールはオフラインで動作しますか?

はい、曲線キャンバス、プレビューボールのアニメーション、CSS コード生成はすべて JavaScript を介して完全にブラウザで実行されます。使用中のネットワーク呼び出しなし。読み込み後にページをオフライン(機内モード)にしてもエディタはまだ動作します。テレメトリなし、決定する曲線値はデバイスを離れません。

関連ツール

Glassmorphismジェネレーター

CSSのフロステッドガラス効果を作成します。

CSSグラデーションジェネレーター

美しいCSSグラデーションを作成します。

Box-shadowジェネレーター

ビジュアルbox-shadowエディター。