トランジションとホバーエフェクト

CoddyのHTMLジャーニー「CSS Mastery」セクションの一部 — レッスン 24/43。

トランジションを使用すると、プロパティを瞬時にではなく、一定の時間にわたって滑らかに変化させることができます。

selector {
  transition: property duration timing-function delay;
}

property: トランジションさせたいCSSプロパティ（例: background-color、width、opacity）。
duration: トランジションが完了するまでにかかる時間（例: 1秒の場合は 1s）。

timing-function: トランジションがどのように進行するか（例：linear、ease、ease-in）。
delay: トランジションを開始するまでの待機時間（任意）。

例えば：

.button {
  background-color: green;
  transition: background-color 0.3s ease;
}
.button:hover {
  background-color: blue;
}

ボタンの上にホバーすると、その背景色が0.3秒かけて緑から青に変化します。

腕試し

このレッスンには短いクイズがあります。レッスンを始めて解答し、進捗を記録しましょう。

腕試し

このレッスンには短いクイズがあります。レッスンを始めて解答し、進捗を記録しましょう。

チャレンジ

簡単

.card に transition プロパティを追加して、background-color と box-shadow の変化が 0.4 秒かけて ease タイミング関数でスムーズに起こるようにしてください。

チートシート

トランジションを使用すると、プロパティを瞬時に変更するのではなく、時間をかけてスムーズに変更することができます。

selector {
  transition: property duration timing-function delay;
}

property: トランジションさせたいCSSプロパティ（例: background-color, width, opacity）
duration: トランジションが完了するまでにかかる時間（例: 1秒の場合は 1s）
timing-function: トランジションがどのように進行するか（例: linear, ease, ease-in）
delay: トランジションを開始するまでの待機時間（任意）

.button {
  background-color: green;
  transition: background-color 0.3s ease;
}
.button:hover {
  background-color: blue;
}

自分で試してみよう

<!DOCTYPE html>
<html>
<head>
  <style>
    /* Write your CSS here */
    .card {
      background-color: white;
      padding: 10px;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }
    
  </style>
</head>
<body>
  <div class="card">
    Hover over me!
  </div>
</body>
</html>

腕試し

このレッスンには短いクイズがあります。レッスンを始めて解答し、進捗を記録しましょう。