Keyword Search

  • 文字数カウントチェッカー

Tools

Design Tools

コーディング

このページはプロモーションが含まれています。

この記事のURLをコピー
CSSイージング関数ビジュアライザー

CSSイージング関数ビジュアライザー

CSS cubic-bezier() のイージング関数をドラッグ操作で直感的に作成できるツールです。ボタンのホバーやカードの浮き上がりなど実UIパーツでアニメーションをプレビューしながら、そのままコピペできるCSSコードを生成します。すべての処理はブラウザ内で完結します。
Preset
Parameters
x1
y1
x2
y2
Duration
ms
Output Format
time → value →
カスタム linear（比較）


CSSイージング関数ビジュアライザー cubic-bezierジェネレーター
目 次

CSSイージング関数（cubic-bezier）とは？

CSSの cubic-bezier() は、アニメーションの「加速・減速のカーブ」を自由に定義できる関数です。4つの数値（x1, y1, x2, y2）で制御点を指定することで、ease や ease-in-out のような既定値では表現できない、なめらかな動きやバウンドを実現できます。transition プロパティや animation-timing-function に直接指定でき、ボタンのホバーエフェクトやモーダルの展開など、UIの質感を大きく左右する重要な要素です。このツールは無料で利用でき、作成したコードはそのままコピペして使えます。

各機能の説明

  • ドラッグ操作でベジェ曲線を調整
    グラフ上の2つのハンドルをドラッグするだけで直感的にカーブを編集できます。スライダーや数値入力との双方向同期で、細かい調整も簡単です。
  • 20種類のプリセットをワンクリックで適用
    ease / ease-in-out などの基本5種に加え、Sine・Quad・Cubic・Expo・Back の各カーブを収録。ベースとなるプリセットを選んでから微調整する使い方が効率的です。
  • 4種の実UIプレビュー（ボール・ボタン・カード・メニュー）
    実際のUIパーツでアニメーションを確認できます。ボタンホバー（カラー変化＋スケール）、カード浮き上がり（translateY＋shadow）、メニュー開閉（height展開）の動きを体験しながら調整できます。
  • linearとの同時比較再生
    ボールプレビューでは、作成したイージングと等速（linear）のボールを同時に再生できます。どれだけ加速・減速の差があるかが一目でわかります。
  • 4形式でのCSSコード出力
    cubic-bezier() 単体 / transition 構文 / animation-timing-function / CSS変数（--easing）の4形式を切り替えてコピーできます。
  • y軸のオーバーシュート対応（バウンド・Back系）
    y1・y2 は −0.5〜1.5 の範囲まで設定可能です。1を超えると行き過ぎて戻るバウンド（Back In/Out）を表現できます。

パラメータの見方

  • x1・x2：時間軸（0〜1の範囲）
    アニメーション開始（0）から終了（1）までの時間の位置を表します。x軸は必ず 0〜1 の範囲に収まる必要があります。
  • y1・y2：値の変化量（−0.5〜1.5も可）
    アニメーションする値（位置・透明度など）の変化量を表します。1を超えるとオーバーシュート（行き過ぎ）、0未満にするとアンダーシュート（逆方向への反発）になります。
  • グラフの読み方
    グラフの傾きが急な部分が「速い」、緩やかな部分が「遅い」箇所です。カーブの形がS字に近いほど ease-in-out 感が強まります。灰色の破線は等速（linear）の基準線です。
  • 実務での推奨デュレーション
    ボタンホバーは 150〜250ms、モーダル展開は 250〜400ms 程度が自然に見えやすい目安です。このツールのデュレーションスライダーを実際の数値に合わせてプレビューすると確認しやすいです。

こんなときに使う

  • ボタンのホバーエフェクトを滑らかにしたい
    背景色の変化やスケールアップをただ切り替えるだけでなく、cubic-bezier でなめらかな加速感を加えることでクリックしたくなるUIに仕上がります。
  • モーダルやドロワーの展開をこだわりたい
    ease-out 系のカーブを使うと「軽快に開く」印象になります。Back Out などのバウンドを加えるとポップな演出にもなります。
  • アニメーションを実装したがカーブが決まらない
    プリセット20種類からベースとなる動きを選び、ハンドルで微調整するワークフローが効率的です。動きを見ながら直感的に決められます。
  • デザインツールで作ったアニメーションをCSSに落としたい
    FigmaやAfter Effectsで設定したイージング値を数値入力欄に直接入力し、CSS形式で書き出すことができます。
  • プロジェクトのデザインシステムにイージングを定義したい
    CSS変数形式（--easing: cubic-bezier(...);）でコピーすれば、:root に直接貼り付けてプロジェクト全体で再利用できます。

よくある質問

  • Q

    cubic-bezier() と ease / ease-in-out の違いは何ですか？

    A

    ease や ease-in-out などは、あらかじめ決められた cubic-bezier() の値に対するエイリアス（別名）です。たとえば ease は cubic-bezier(0.25, 0.1, 0.25, 1.0) と同じ意味です。cubic-bezier() を直接指定することで、既定値では表現できない独自のカーブを自由に定義できます。

  • Q

    y1やy2に1を超える値を設定するとどうなりますか？

    A

    y値が1を超えると「オーバーシュート」と呼ばれる、終点を一度行き過ぎてから戻る動きになります。Back Out などのバウンド感あるアニメーションがこれに該当します。逆に0未満にすると開始時に逆方向へ引く動き（アンダーシュート）になります。x1・x2 は仕様上 0〜1 の範囲のみ有効です。

  • Q

    ボタンのホバー時と元に戻るときで別々のイージングを使えますか？

    A

    CSSの transition を使う場合、:hover 側と通常状態（:not(:hover) 相当）にそれぞれ transition を書くことで、往路と復路に別のイージングを設定できます。このツールで作成したコードを :hover の transition プロパティに貼り付けることで往路の動きをカスタマイズできます。

  • Q

    生成したコードはどのブラウザで使えますか？

    A

    cubic-bezier() は Chrome・Firefox・Safari・Edge などすべての主要ブラウザで対応しています（Internet Explorer 10以降も対応）。CSS変数（カスタムプロパティ）形式は IE 非対応ですが、現在のWeb制作では問題になるケースはほぼありません。

  • Q

    入力したデータはサーバーに送信されますか？

    A

    いいえ、送信されません。このツールはすべての処理をブラウザ内のJavaScriptで完結しており、外部サーバーへの通信は一切行いません。安心してご利用ください。