Переходы и эффекты наведения

Часть раздела Мастерство CSS путешествия по HTML на Coddy. Урок 24 из 43.

Переход позволяет плавно менять свойство с течением времени, а не мгновенно.

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

свойство: Свойство CSS, для которого нужно задать переход (например, background-color, width, opacity).
длительность: Время, необходимое для завершения перехода (например, 1s — 1 секунда).

timing-function: Как выполняется переход (например, linear, ease, ease-in).
delay: Как долго ждать перед началом перехода (необязательно).

Например:

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

Когда вы наведёте указатель на кнопку, её цвет фона изменится с зелёного на синий за 0.3 секунды.

Чтобы добавить переход для нескольких свойств, перечислите их в одном объявлении transition, разделив запятыми (вторая строка transition заменит первую):

transition: width 0.3s ease, opacity 0.3s ease;

Задание

Легко

Добавь свойство transition к .card, чтобы изменения цвета фона и тени блока происходили плавно в течение 0.4 секунды с функцией времени ease.

Затем добавь правило .card:hover, которое меняет цвет фона и тень блока, чтобы переходу было что анимировать.

Попробуйте сами

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