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

Часть раздела CSS Mastery путешествия по 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 к .card, чтобы изменения background-color и box-shadow происходили плавно в течение 0.4 секунды с функцией сглаживания ease.

Шпаргалка

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

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

property: CSS-свойство, для которого вы хотите настроить переход (например, background-color, width, opacity)
duration: время, необходимое для завершения перехода (например, 1s для 1 секунды)
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>

Проверьте себя

В этом уроке есть небольшой тест. Начните урок, чтобы ответить на вопросы и сохранить прогресс.