【初心者必見】CSSの transition と transition-duration の違いを徹底解説！

---

はじめに：transitionとtransition-durationの基本を押さえよう

CSSの世界にはさまざまな用語があり混乱しやすいものもありますがtransitionとtransition-durationは初心者にも理解しやすいポイントです。transitionはある要素が別の状態へ変わるときの「動き全体」を一度に指示する短い命令です。どのプロパティを動かすか、どれくらいの時間で動かすか、どんなタイミングで始めるか、遅延はどうするかを一度に設定します。

つまりtransitionを使えば一つの宣言で複数の条件をまとめて設定でき、後から変更する手間を減らせます。一方transition-durationはこの命令のうちの時間だけを指定する要素で、他の要素は影響を受けません。

この違いを押さえておくと、デザインの統一感を崩さずに動きを微調整でき、むだな動作を避けられます。次に実例を交えながら、理解を深めていきましょう。

違いが生まれる場面を整理

transitionはプロパティの変化を滑らかに見せるための総合的な指示です。transitionを使うときには通常 transition-property で何を変化させるかを指定し、transition-duration でその変化にかかる時間を決め、transition-timing-function で変化の速さの曲線を指定します。さらに transition-delay で動作開始の遅れを設定できます。これらをすべて一括して transition というひとつの宣言にまとめることもできます。単純に使うときは all を指定しますが、複数のプロパティを同時に変える場合、すべてに同じ時間を適用したいとは限りません。そういうときには transition-duration を個別に設定するか、または transition: opacity 0.5s ease, transform 1s ease 0s などと書いて、個別の動きを組み合わせます。つまり状況に応じて整理する力が必要であり、transition-duration はその整理を助ける重要な道具です。初心者はまず transition の書き方を覚え、次に duration を分けて使う練習をすると理解が深まります。

この理解を元に、実際のWebページで試してみると、transition-duration の挙動が直感的に見えてきます。例えば hover で同じdurationでも property によって動作が異なることを確認でき、ユーザーの視覚的認知を調整する手がかりになります。

実用的な使い分けのコツ

実務での使い分けにはいくつかのコツがあります。一つ目は目的を明確にすることです。色や透明度、位置などどの属性を滑らかに見せたいのかを決め、それに応じて transition の設定を揃えます。二つ目は統一感のある時間を決めることです。全体で違和感が出ないよう、ボタンとナビゲーションなど同じ部品には同じ duration を適用すると見た目が整います。三つ目は段階的なデバッグです。途中まで transition を一括設定して動作を確認し、必要なら transition-duration を個別に調整します。これらを実践すれば、技術的には難しくなくても美しい動きをユーザーに届けられます。

さらに日常的な工夫として、アクセシビリティのことも考えます。動きが強すぎると閲覧が難しくなる場合があるため、モーションプリファレンスを尊重して必要に応じて動作を減らす設定を検討します。

ピックアップ解説

ある日の放課後、デザイン部の二人、ミユとケンはウェブデザインの課題に取り組んでいました。transition-duration の話題が出ると、ケンは動きの長さが印象を大きく変えると語ります。transition は動き全体の設計図であり、duration はその設計図の時間の尺を決める道具だと説明します。ミユは最初、すべてを transition 一つで済ませようとしましたが、実際には一部の動作だけを長くしたい場面があると気づきます。そこで opacity と transform を個別に設定してみると、ボタンの反応が直感的になり、デザインの自由度が広がることを体感しました。こうして、transition と duration の違いを理解することで、ユーザーに伝わる印象をコントロールできるようになったのです。

---