CSS cubic-bezier()をマウス・タッチ・数値入力で編集。29種のプリセット、アニメーションプレビュー、CSSコードコピーに対応。
縦軸: 進行度横軸: 時間
CSS transitionプレビュー
.element {
transition: all 1000ms cubic-bezier(0.25, 0.1, 0.25, 1);
}
@keyframes slide {
from { transform: translateX(0); }
to { transform: translateX(200px); }
}
.element {
animation: slide 1000ms cubic-bezier(0.25, 0.1, 0.25, 1);
}cubic-bezier()は、CSSのtransition-timing-functionやanimation-timing-functionで使用されるイージング関数です。アニメーションの加速・減速のカーブを4つの数値（2つの制御点のx, y座標）で定義します。
W3CのCSS Easing Functions Level 1仕様で定義されており、ease、ease-in、ease-out、ease-in-out、linearといったキーワードはすべてcubic-bezier()の特定の値に対応しています。
cubic-bezier()は4つの引数 cubic-bezier(x1, y1, x2, y2) を取ります。これらは3次ベジェ曲線の2つの制御点を表します。
| パラメータ | 範囲 | 説明 |
|---|---|---|
| x1 | 0〜1 | 第1制御点の時間軸位置 |
| y1 | 本ツールでは-1〜2 | 第1制御点の進行度 |
| x2 | 0〜1 | 第2制御点の時間軸位置 |
| y2 | 本ツールでは-1〜2 | 第2制御点の進行度 |
CSS仕様ではx値を0〜1に制限し、y値には構文上の範囲制限を設けていません。本ツールはカーブとハンドルを画面内で確認できるよう、y値の編集範囲を-1〜2に制限しています。負値では一時的に戻る動き、1を超える値では行き過ぎる動きを作れます。
| キーワード | cubic-bezier()値 | 特徴 |
|---|---|---|
linear | cubic-bezier(0, 0, 1, 1) | 等速 |
ease | cubic-bezier(0.25, 0.1, 0.25, 1) | ゆっくり→速く→ゆっくり（デフォルト） |
ease-in | cubic-bezier(0.42, 0, 1, 1) | ゆっくり開始 |
ease-out | cubic-bezier(0, 0, 0.58, 1) | ゆっくり終了 |
ease-in-out | cubic-bezier(0.42, 0, 0.58, 1) | 両端がゆっくり |
x値は0〜1、y値は-1〜2、再生時間は100ms単位です。入力、カーブ計算、プレビューはブラウザ内で行い、設定値をサーバーへ送信・保存しません。
CSSアニメーション集（@keyframes）
CSS @keyframesアニメ32種をカテゴリ別に選択し、再生時間・遅延・イージング・繰り返しを調整。ホバーとキーボード操作、動き軽減に対応したCSS・HTML例を生成。
CSS transform 効果集
CSS transformの重複しない実用プリセット29種。2D・3D・hover/focus・active・アイソメトリック・遠近感を選び、パラメータと操作状態をCSSへ反映。必要な親perspectiveも生成。
CSSグラデーション生成ツール
線形・放射・円錐の3種を2〜12色で作成。角度・位置を調整し、CSSと位置を保持するTailwind arbitrary valueをコピー。12種のプリセット付き。