CSS イージング ジェネレーター
無料オンライン CSS イージング ジェネレーター。インタラクティブな曲線上で cubic-bezier の制御点をドラッグし、18 種類のプリセットから選んで、ボールのループ アニメーションで確認しながらタイミング関数を即座にコピー。
CSS のイージング関数とは？
イージング関数は、アニメーションやトランジションが時間とともにどう進むかの速度感を制御します。等速で動くだけでなく、ゆっくり始めて加速し、行き過ぎてから収まるといった動きが作れます。CSS では transition-timing-function や animation-timing-function で指定します。
cubic-bezier() の 4 つの数値の意味は？
cubic-bezier(x1, y1, x2, y2) は 2 つの制御点で曲線を定義します。1 つ目が動きの始まりを、2 つ目が終わり方を形作ります。X は時間を表し 0〜1 に固定、Y は進行度を表し、0 が初期値、1 が最終値です。
Y は 0〜1 の外に出られるのに X はなぜダメ？
X は実際の時間に対応するため、0 未満や 1 超は時間の因果を壊すとして仕様で禁止されています。Y は自由で、1 を超えると目標を行き過ぎ、0 未満は一度後退してから進みます。Back 系プリセットの弾みはこの性質によるものです。
ease・ease-in・ease-out の違いは？
ease はブラウザの既定値で、滑らかに始まり滑らかに着地します。ease-in はゆっくり始めて速く終わり、ease-out は速く始めて減速し、ease-in-out はその両方。このツールにはさらに sine・quad・cubic・quart・expo・back・material のプリセットがあり、合計 18 種類です。
ボールのプレビューはどう動きますか？
2 つのボールが設定した時間でループします。上のボールは常にリファレンスとして linear（等速）、下のボールはあなたの曲線で動きます。2 つの間隔が広がったり縮んだりすることで、イージングがもたらす違いがひと目でわかります。
生成された値はどこに貼ればいい？
transition-timing-function または animation-timing-function の値として使います。例：transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);。このツールは素の cubic-bezier(...) 関数を出力するので、どんなルールにもそのまま入れられます。
イージング関数はアニメーションの性能に影響しますか？
タイミング関数自体はコストゼロで、時間に対する進行度の対応を付け替えるだけです。性能を左右するのはアニメーション対象のプロパティです。transform と opacity は GPU で処理され軽快ですが、width や top などのレイアウト プロパティは、イージングに関係なく高コストな再配置を引き起こします。
本物のバウンドやエラスティックは作れますか？
単一の cubic-bezier で行き過ぎは 1 回表現できますが、本物のバウンドのような複数回の反復は作れません。それには @keyframes で複数キーフレームをつなぐか、Web Animations API を使います。cubic-bezier が得意な 1 回の滑らかなオーバーシュートこそ、このツールの持ち味です。
ここでの操作はアップロードされますか？
いいえ。曲線はローカルの Canvas に描かれ、プレビュー アニメーションは完全にブラウザ内で動きます。サーバーには何も送信されないため、ページ読み込み後はオフラインでも使えます。
CSS イージング ジェネレーターの使い方
数値の勘に頼らず、視覚的に CSS のイージングカーブを彫り上げましょう。コントロールポイントをドラッグし、線形のリファレンスと並べて比較し、仕上がった cubic-bezier をワンクリックでコピー。すべてブラウザー内でローカルに動作します。
- 18 種類のプリセットから出発点を選びます。Ease Out、Expo Out、Back Out など。
- カーブ上の 2 つのハンドルをドラッグします。X 軸は時間で 0〜1 の範囲、Y 軸は進行度で追い越し可能です。
- 正確な値が必要なときは、数値入力で P1・P2 の座標を微調整します。
- 再生時間スライダーを調整し、ループする 2 つのボールを見ます。中空のボールは常に等速、塗りつぶしのボールがあなたのカーブです。
- 生成された cubic-bezier の値を transition-timing-function や animation-timing-function にコピーします。
Y ハンドルを 1 を超える位置へ引くと自信のあるオーバーシュートになります。たとえば cubic-bezier(0.34, 1.56, 0.64, 1)。キーフレームなしでボタンやカードに弾む質感を与えられます。
関連ツール
- CSSグラデーションジェネレーター ビジュアルに素晴らしいCSSグラデーションを作成。複数のカラーストップ、カスタム角度、位置で線形・放射・円錐グラデーションを生成。本番対応CSSコードを即座にコピー。
- CSSローダージェネレーター 無料のCSSローダージェネレーター。純粋なCSSだけで作る10種類のローディングアニメーションをサイズ・速度・太さ・色をライブ調整しながら選び、HTMLとCSSをそのままコピーできます。
- border-radius ジェネレーター 無料オンライン border-radius ジェネレーター。8つのハンドルをドラッグするかblobプリセットを選んで、有機的なCSSシェイプを作成し、コードをすぐにコピーできます。
- カラーコンバーター 無料オンラインカラーコンバーター。HEX、RGB、HSL、HSV形式をビジュアルピッカーで即座に変換。100% プライベート、ブラウザで動作。
- CSS テキストシャドウ ジェネレーター 無料オンライン CSS text-shadow ジェネレーター。オフセット・ぼかし・色・不透明度を設定した複数レイヤーを重ねて、ネオンや 3D、レトロのプリセットを試せます。ライブプレビューで即 CSS コピー。
- CSS clip-path ジェネレーター 無料オンライン CSS clip-path ジェネレーター。頂点をドラッグして polygon・circle・ellipse・inset の形状を作り、ライブプレビューしながら CSS をワンクリックでコピー。
- CSSビューティファイアー CSSコードを即座にフォーマット・美化します。圧縮されたCSSを読みやすく、適切にインデントされたコードに変換します。カスタマイズ可能なオプション付き。
- CSS圧縮ツール 無料オンラインCSS圧縮ツール。空白、コメント、不要な文字を削除してCSSコードを即座に圧縮・最適化。ファイルサイズを削減し、ウェブパフォーマンスを向上させます。