Анимации - практическое задание

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

Hover эффект с масштабированием элементов

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

.card {
  transition: ...
}

.card:hover {
  transform: ...
}
css

Добавление анимаций

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

@keyframes fadeUp {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.card {
  ...
  animation: fadeUp ...;
}
css

Для последовательного появления карточек друг за другом можно использовать псевдокласс :nth-child и свойство animation-delay:

.card:nth-child(1) { animation-delay: 1s; }
.card:nth-child(2) { animation-delay: 2s; }
...
css

В результате ваша страница оживет и будет создавать лучшее впечатление на пользователей.