CSS Transition Generator

このツールについて

CSSトランジションジェネレーターは、対象プロパティ、継続時間、タイミング関数、遅延を設定してtransitionショートハンドプロパティを構成できます。インタラクティブなプレビューでコードをコピーする前にトランジションの動作を確認できます。

CSSトランジションは、:hover、:focusなどの疑似クラスやJavaScriptによるクラス変更によってトリガーされる2つのCSS値間のスムーズな状態変化を作成します。

使い方

1. トランジションするCSSプロパティを選択するか、allを使用してください。
2. 継続時間を設定してください（例: 0.3s）。
3. 加速カーブを制御するタイミング関数を選択してください。
4. 任意でトランジション開始前の遅延を追加してください。
5. プレビューボックスにカーソルを合わせて効果をリアルタイムで確認し、CSSをコピーしてください。

活用事例

開発者はボタンホバー効果、カードのスケールアップ、ナビゲーションリンクのスムーズな色変化にトランジションを使用します。フォームデザイナーは入力フォーカススタイルに、サイドバーコンポーネントはスライドイン/アウトに使用します。

よくある質問

• トランジションとアニメーションの違いは何ですか？ — トランジションは状態変化（ホバーなど）に反応し、アニメーションはキーフレームを使って自動的またはループで実行されます。
• 複数のプロパティをトランジションできますか？ — はい。「トランジション追加」をクリックすると、カンマ区切りで複数のプロパティルールを追加できます。
• どのプロパティをトランジションできますか？ — 数値を持つほとんどのプロパティ（opacity、color、transform、サイズなど）をトランジションできます。displayなどのプロパティは不可能です。