🎬 CSS Transition生成
対象プロパティ・時間（duration）・イージング（easing）・遅延（delay）を調整し、動きをその場でプレビューしながら transition のCSSを生成します。cubic-bezierのカスタム指定にも対応。すべての処理はブラウザ内で完結し、入力内容はサーバーに送信されません。
「再生」でA↔Bを切り替えます。ボックスにマウスを乗せても動きます。
linear
ease
ease-in-out
バウンス
「再生」を押すと4つのイージングが同時に動き、違いを比較できます。
📘 使い方
- 「プロパティ」で対象を選び、「時間」スライダーでアニメーションの長さ（duration）を設定します。
- 「イージング」で加速・減速のカーブを選びます。「カスタム」を選ぶと cubic-bezier の4つの値を直接入力できます（x座標は0〜1に制限されます）。
- 「遅延」スライダーで開始までの待ち時間（delay）を設定します。
- 「再生」ボタンでプレビューを切り替え、下部の比較デモでイージングの違いを確認できます。生成された transition のCSSは「コピー」で取得できます。
❓ よくある質問
transitionとanimationの違いは何ですか？
transition は状態が変化したとき（クラス付与・ホバーなど）に始点と終点の間を補間する仕組みです。キーフレームで複雑な連続動作を定義したい場合は animation と @keyframes を使います。
cubic-bezierの値はどう決めればよいですか？
cubic-bezierは2つの制御点 (x1, y1) と (x2, y2) でカーブを表します。x座標は0〜1に収める必要があり、y座標は0未満や1超も指定できます。y値を範囲外にするとバウンス（行き過ぎて戻る）表現になります。
プロパティに「all」を指定しても大丈夫ですか？
手軽ですが、意図しないプロパティまでアニメーションしたり、再描画コストが増えたりする場合があります。パフォーマンスを重視する場合は transform や opacity のように対象を絞ることをおすすめします。
入力内容はサーバーに送信されますか？
いいえ。CSSの生成・プレビューはすべてお使いのブラウザ内（クライアントサイド）で行われ、サーバーへ送信されることはありません。オフラインや file:// でも動作します。