⏱️ CSSトランジション生成

CSSトランジション生成について

transition CSSプロパティでプロパティ変化のタイミングを定義します。ある値から別の値へ瞬時にジャンプする代わりに、ブラウザが指定した継続時間で滑かに補間します。本生成器でプロパティ、継続時間、イージング曲線、遅延を選択し、結果を即座にコピーできます。

制御可能なプロパティ

• プロパティ —— アニメーションさせるCSSプロパティ（または all ですべてのアニメーション可能プロパティ）。
• 継続時間 —— トランジションにかかる時間（秒）。
• タイミング関数 —— イージング曲線：ease、linear、ease-in、ease-out、ease-in-out、またはステップ関数。
• 遅延 —— トランジション開始前の待機時間（秒）。

使い方

1. アニメーションさせるプロパティを選択。
2. スライダーで継続時間を設定。
3. イージング曲線のタイミング関数を選択。
4. 必要に応じて遅延を調整。
5. プレビューボックスをホバーしてトランジションを確認。
6. CSSをコピーをクリックしてスタイルシートに貼り付け。

よくある質問

トランジションとアニメーションの違いは？ トランジションはプロパティ値が変化した時（例：ホバー時）にプロパティを滑らかに変化させます。@keyframes アニメーションは自動的に実行され、キーフレームを定義しループできます。

複数のプロパティをトランジションできますか？ はい。カンマで複数のトランジション定義を区切れます、例：transition: color 0.3s ease, transform 0.5s ease-in。

トランジションが動かないのはなぜ？ プロパティがアニメーション可能か（例：display はトランジション不可）、継続時間が0より大きいか、プロパティ値が実際に変化しているか確認してください。