Анимации CSS: практика

Пришло время применить знания о transition и анимациях на практике. Давайте добавим несколько визуальных эффектов на нашу страницу о Санкт-Петербурге.

Hover-эффект на карточках фич

Первым делом добавим эффект масштабирования к карточкам с фичами города при наведении курсора мыши. Для этого будем использовать псевдокласс :hover, свойство transform с функцией scale и transition для плавности.

Хороший hover-эффект обычно состоит из двух частей: базовое состояние (где мы описываем переход) и состояние при наведении (где мы задаём конечные значения):

.feature {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.feature:hover {
  transform: scale(1.03);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
css

Обратите внимание: transition мы задаём в базовом состоянии, а не в :hover. Это важно — если задать transition только в :hover, плавным будет только переход «в» состояние при наведении, а «обратно» элемент вернётся мгновенно.

Добавление box-shadow при наведении создаёт эффект «приподнятости» карточки — вместе с масштабированием это выглядит аккуратно и современно.

Анимация появления карточек достопримечательностей

Вторым эффектом добавим плавное появление карточек с достопримечательностями при загрузке страницы. Здесь удобно использовать @keyframes.

Анимация fadeUp — одна из самых распространённых: элемент появляется снизу и одновременно проявляется из прозрачного:

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}
css

Применяем анимацию к карточкам. Обратите внимание на animation-fill-mode: both — оно гарантирует, что до старта анимации карточка будет невидимой (иначе она мелькнёт перед началом):

.attractions .card {
  animation: fadeUp 0.6s ease-out both;
}
css

Последовательное появление

Если все карточки появляются одновременно — это выглядит неплохо. Но если они появляются одна за другой с небольшой задержкой — значительно интереснее. Для этого используем псевдокласс :nth-child и свойство animation-delay:

.attractions .card:nth-child(1) { animation-delay: 0s; }
.attractions .card:nth-child(2) { animation-delay: 0.1s; }
.attractions .card:nth-child(3) { animation-delay: 0.2s; }
.attractions .card:nth-child(4) { animation-delay: 0.3s; }
.attractions .card:nth-child(5) { animation-delay: 0.4s; }
css

Небольшие задержки (0.1–0.15 секунды между карточками) смотрятся лучше, чем большие — страница не кажется медленной, но эффект каскада при этом виден.

Дополнительно — эффект на кнопках навигации

Если на вашей странице есть кнопки или ссылки в навигации, к ним тоже можно добавить плавный hover-переход. Например, изменение цвета текста или фона:

nav a {
  transition: color 0.2s ease;
}

nav a:hover {
  color: #4a90e2;
}
css

Ожидаемый результат

После выполнения задания страница должна:

• плавно масштабировать карточки фич при наведении;
• показывать тень при наведении, создавая эффект «приподнятости»;
• анимировать появление карточек достопримечательностей при загрузке страницы;
• появлять карточки последовательно, а не все сразу.

В следующем уроке поговорим об адаптивной вёрстке — как сделать так, чтобы страница одинаково хорошо выглядела на мобильных устройствах и на десктопе.