Базовые анимации HTML элементов

Современный интерфейс — это не просто статичная страница. Анимации помогают:

• направлять внимание пользователя;
• делать интерфейс более понятным;
• создавать ощущение «живого» продукта;
• улучшать пользовательский опыт (UX).

Важно помнить, что хорошая анимация — это не украшение ради украшения, а инструмент взаимодействия.

В CSS есть два основных способа анимировать элементы, давайте рассмотрим их.

Transition — плавные переходы

Свойство transition позволяет плавно изменять CSS-свойства при изменении состояния элемента (например, при :hover). Это свойство можно задать следующим образомяЖ transition: свойство длительность функция_времени задержка;. Например, если мы хотим чтобы карточка из предыдущих практических заданий увеличивалась при наведении курсора можно сделать таким образом:

.card img {
  transition: transform 0.4s ease;
}

.card:hover {
  transform: scale(1.1);
}
css

На первом месте в transition передается имя CSS-свойства которое будет анимироваться.

Втором аргументом передается продолжительность анимации.

Третий аргумент необязательный. На его месте предается функция времени. Эта функция определяет то, как анимация будет развиваться во времени - например, плавно или с ускорением. Основные функции времени:

• linear — равномерно;
• ease — плавное начало и конец;
• ease-in — медленный старт;
• ease-out — плавная остановка;
• ease-in-out — комбинированный вариант.

Подробнее о функциях времени можно почитать в документации на MDN (к сожалению статья не переведена на русский язык)

С помощью transition можно анимировать не только какое-то одно свойство элемента, но и несколько свойств одновременно. В таком случае они указываются через запятую, при этом необходимо указать все параметры для каждого свойства отдельно:

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

CSS-анимации через @keyframes

Если transition работает только при изменении состояния, то @keyframes позволяет создавать полноценные анимационные сценарии.

С помощью @keyframes мы можем "покадрово" описать с чего начинается анимация, какие промежуточные состояния есть, чем она заканчивается. Это похоже на раскадровку в анимационном фильме.

Анимация состоит из двух частей - объявление ключевых кадров и рименение анимации к элементу.

Для объявления ключевых кадров используется следующий синтаксис:

@keyframes имя_анимации {
  0% {
    /* начальное состояние */
  }

  100% {
    /* конечное состояние */
  }
}
css

Внутри @keyframes мы обязательно должны определить начальное и конечное состояние элемента (кроме процентов здесь можно использовать ключевые слова from и to). И затем, если необходимо, любое количество промежуточных состояний внутри этого интервала с помощью значения в процентах, например так:

@keyframes bounce {
  0% {
    transform: translateY(0);
  }
  30% {
    transform: translateY(-20px);
  }
  60% {
    transform: translateY(10px);
  }
  100% {
    transform: translateY(0);
  }
}
css

После объявления анимации ее можно применить к элементу:

.element {
  animation: имя_анимации 1s ease;
}
css

В имени анимации мы должны указать соответсвующий @keyframes, далее указываем продолжительноть и уже знакомую нам функцию времени.

Кроме этих базовых настроек в animation можно передать "расширенный" набор свойств. Полная форма выглядит так: animation: name duration timing-function delay iteration-count direction fill-mode;, здесь:

• animation-delay - задержка перед стартом. Полезно для последовательного появления элементов;
• animation-iteration-count- определяет сколько раз повторить анимацию;
• animation-direction - определяет направление воспроизведения анимации;
• animation-fill-mode - важный параметр, который определяет что происходит с элементом до старта и после окончания.

Эти параметры могут быть переданы и как отдельные свойства:

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

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

.card {
  opacity: 0;
  animation-name: fadeUp;
  animation-duration: 0.8s;
  animation-timing-function: ease-out;
  animation-delay: 0.3s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
}
css

В следующем уроке выполним практическое задание и добавим к нашейц странице визуальные эффекты с помощью transform и анимаций.