CSSのtransitionでスタイル変更をスムーズにアニメーション化する方法をわかりやすく解説

2024.09.14
スポンサーリンク

transitionプロパティは、要素が変化する際にアニメーションを適用するために使用されます。このプロパティを使うことで、要素の見た目や配置が徐々に変化し、スムーズな遷移を実現できます。トランジションとはマウス、カーソルが重なった時に動作するアニメーションです。

スポンサーリンク

transitionプロパティの値とその効果の一覧

  • transition-property: どのプロパティにトランジションを適用するか指定します。
  • transition-duration: トランジションにかかる時間を指定します。
  • transition-timing-function: トランジションの速度変化のタイミングを指定します。
  • transition-delay: トランジションが開始するまでの遅延時間を指定します。

注意点と関連情報

トランジションの指定は、複数のプロパティに適用することができますが、各プロパティには適切な時間やタイミングを設定する必要があります。transitionプロパティは、遷移させたいプロパティ、時間、タイミング関数、遅延時間をすべて一括で指定できます。

transitionが効かない時の原因と対策

transition対象のプロパティが指定されていない

transitionは、指定したプロパティに対して適用されますが、どのプロパティに適用するかが明確でない場合、トランジションは発生しません。例えば、transitionが設定されていても、対象プロパティがnoneや間違ったものだと機能しません。

対策: transitionを適用したいプロパティを明示的に指定します。例えば、transition: opacity 0.5s ease;やtransition: all 0.5s ease;のように、対象となるプロパティを明確に指定します。

共通するCSSコード

.css-sample-container {
  padding: 20px;
  border: 1px solid #ccc;
  margin-bottom: 20px;
  width: 300px;
  background-color: #f9f9f9;
  text-align: center;
}

.css-sample-box {
  width: 100px;
  height: 100px;
  background-color: #4CAF50;
  margin: 0 auto;
  transition: all 1s ease;
}

.css-sample-box:hover {
  transform: scale(1.5);
  background-color: #FF5722;
}

transition-property: background-color

この設定では、背景色の変更のみがトランジションによってスムーズに変化します。マウスを重ねて確認してください。

HTMLコード

<div class="css-sample-container">
  <div class="css-sample-box css-sample-transition-property"></div>
</div>

CSSコード

.css-sample-transition-property {
  transition-property: background-color;
}

表示結果

transition-duration: 2s

トランジションの実行に2秒かかります。

HTMLコード

<div class="css-sample-container">
  <div class="css-sample-box css-sample-transition-duration"></div>
</div>

CSSコード

.css-sample-transition-duration {
  transition-duration: 2s;
}

表示結果

transition-timing-function: ease-in-out

トランジションの速度が初めはゆっくりで、次第に速くなり、終わりに再びゆっくりとなります。

HTMLコード

<div class="css-sample-container">
  <div class="css-sample-box css-sample-transition-timing-function"></div>
</div>

CSSコード

.css-sample-transition-timing-function {
  transition-timing-function: ease-in-out;
}

表示結果

transition-delay: 1s

トランジションが1秒遅れてから開始されます。

HTMLコード

<div class="css-sample-container">
  <div class="css-sample-box css-sample-transition-delay"></div>
</div>

CSSコード

.css-sample-transition-delay {
  transition-delay: 1s;
}

表示結果

まとめ

  • transitionプロパティは、要素のスタイル変更をスムーズにアニメーション化します。
  • 変更したいプロパティ、時間、タイミング関数、遅延時間を個別にまたはまとめて設定可能です。
  • transition-durationで時間を指定し、transition-timing-functionで遷移の進行パターンを調整できます。
  • transition-delayでトランジションの開始を遅らせることも可能です。
スポンサーリンク