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

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

トランジションを使うと、プロパティを瞬時に変更するのではなく、時間をかけて滑らかに変更できます。

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

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

timing-function: transition の進行方法（例: linear、ease、ease-in）。
delay: transition を開始する前に待機する時間（任意）。

例：

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

button に hover すると、その background color は green から blue へ 0.3 seconds over 変化します。

チャレンジ

簡単

transition プロパティを .card に追加し、background color と box-shadow の変更が ease timing function を使って 0.4 秒かけて滑らかに行われるようにします。

自分で試してみよう

<!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>