複数プロパティのトランジション
カンマ区切りの値を使い、複数のCSSプロパティに同時にトランジションを適用します。
「複数プロパティのトランジション」はCoddyKit上の無料CSS Academyレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはCSS Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 CSS Academyコースには全4レッスンが含まれています。
複数のプロパティをトランジションする理由
実際のUI操作では、ホバー時に背景色、影、スケールなど、複数のプロパティが同時に変化することがよくあります。CSSでは、プロパティごとに異なるイージングと継続時間を設定できます。
カンマ区切りのトランジション
複数のトランジションをカンマで区切って指定します。各項目は、1つのプロパティに個別に適用されます。
<div class="card">Card</div>プロパティごとに異なる継続時間
各プロパティに異なる速度を設定すると、重なりのある自然な動きになります。
<button class="btn">Hover-ready button</button>プロパティごとに異なるイージング
イージング関数を組み合わせて、各プロパティに適した動きにします。
<div class="modal">Modal content</div>transition: allの欠点
transition: allを使うと、変化するすべてのプロパティに同じタイミングが適用されます。そのため、瞬時に切り替えるべきプロパティ（displayやpositionの変更など）まで不要にアニメーションすることがあります。
中断可能なトランジション
CSSトランジションは中断できます。トランジションの途中でホバー状態が終了すると、最終状態からではなく、その時点でアニメーション中の値から逆方向に遷移します。これにより、唐突なジャンプのない滑らかな反転が実現します。
開始と終了の調整
:hover状態でトランジションを上書きすると、ホバー開始時とホバー解除時に異なる継続時間を設定できます。
<div class="card demo-active">Card</div>遅延による段階的な表示
兄弟要素に段階的に増加する遅延を追加すると、順番に表示される効果を作成できます。
<div class="item">One</div>
<div class="item">Two</div>
<div class="item">Three</div>段階表示のためのCSSカスタムプロパティ
JavaScriptまたはHTMLから設定したCSSカスタムプロパティで、段階表示の遅延を割り当てます。
<div class="item">Item</div>トランジションとアニメーション
2つの状態の変化（待機 → ホバー）にはトランジションを使用します。複数のステップからなるシーケンス、ループする効果、自動的に開始するアニメーションには@keyframesアニメーションを使用します。
will-changeによる最適化
アニメーションするプロパティをブラウザーに知らせ、事前最適化を可能にします。ただし、GPUメモリを消費するため、使用は控えめにしてください。
<div class="card">Card</div>簡単な確認
カードのベース状態にtransition: background 150ms, transform 250msがあります。ホバー中にアニメーションが進行している途中でユーザーがすばやくカーソルを離すと、何が起こりますか？
振り返り
カンマ区切りでトランジションを指定すると、各プロパティに個別の継続時間、イージング、遅延を設定できます。transition: all は意図しないプロパティまでアニメーションさせる可能性があるため、避けてください。トランジションは途中で中断でき、現在の位置から滑らかに逆方向へ戻ります。段階的な効果には遅延を使用してください。
よくある質問
「複数プロパティのトランジション」レッスンは無料ですか？
はい。「複数プロパティのトランジション」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、CSS Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 CSS Academyコースには全4レッスンが含まれています。
「複数プロパティのトランジション」で何を学びますか？
カンマ区切りの値を使い、複数のCSSプロパティに同時にトランジションを適用します。 ブラウザで直接実行するハンズオンコードでCSS Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
CSS Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのCSS Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。
「複数プロパティのトランジション」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このCSS Academyレッスンでコードを書いて実行できますか？
はい。すべてのCSS Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。