День 17 | Добавляем анимацию

CSS анимации

Анимации делают сайт живым и привлекательным. Они привлекают внимание, показывают взаимодействие, делают интерфейс более дружелюбным. CSS предоставляет мощные инструменты для создания плавных анимаций.

Зачем нужны анимации?

• Привлекают внимание к важным элементам
• Показывают обратную связь (кнопка нажата, элемент загружается)
• Улучшают восприятие изменений (плавное появление вместо резкого)
• Делают интерфейс более современным и профессиональным

@keyframes - основа анимаций

@keyframes определяет последовательность кадров анимации. Это как раскадровка для мультфильма — вы описываете, как элемент должен выглядеть в разные моменты времени.

Синтаксис:

@keyframes название-анимации {
  from {
    /* Начальное состояние */
  }
  to {
    /* Конечное состояние */
  }
}

Или с процентами (для более сложных анимаций):

@keyframes название-анимации {
  0% {
    /* Начальное состояние */
  }
  50% {
    /* Промежуточное состояние */
  }
  100% {
    /* Конечное состояние */
  }
}

Разберём анимацию slideIn:

• from — элемент начинается слева за экраном (translateX(-100px)) и невидим (opacity: 0)
• to — элемент на своём месте (translateX(0)) и видим (opacity: 1)
• transform: translateX() — перемещает элемент по горизонтали (не вызывает reflow, в отличие от изменения left/right)

Свойства animation

Свойство animation — это сокращённая запись для всех свойств анимации. Но давайте разберём каждое свойство отдельно:

.element {
  animation-name: slideIn;        // Название анимации
  animation-duration: 1s;         // Длительность
  animation-timing-function: ease-out; // Функция времени
  animation-delay: 0.5s;          // Задержка
  animation-iteration-count: 3;   // Количество повторений (или infinite)
  animation-direction: normal;     // Направление (normal, reverse, alternate)
  animation-fill-mode: both;      // Состояние до/после анимации
  animation-play-state: running;  // Состояние (running, paused)
}

Разберём каждое свойство:

1. animation-name

Название анимации, определённой в @keyframes.

2. animation-duration

Длительность анимации. Можно указывать в секундах (1s) или миллисекундах (1000ms).

3. animation-timing-function

Функция времени определяет, как анимация ускоряется и замедляется:

• linear — постоянная скорость (равномерно)
• ease — медленно, быстро, медленно (по умолчанию)
• ease-in — начинается медленно, ускоряется
• ease-out — начинается быстро, замедляется
• ease-in-out — медленно, быстро, медленно
• cubic-bezier() — кастомная функция (продвинутый уровень)

4. animation-delay

Задержка перед началом анимации. Полезно для последовательного появления элементов.

5. animation-iteration-count

Количество повторений:

• 1 — один раз (по умолчанию)
• 3 — три раза
• infinite — бесконечно

6. animation-direction

Направление анимации:

• normal — от начала к концу (по умолчанию)
• reverse — от конца к началу
• alternate — туда-обратно (вперёд, потом назад)
• alternate-reverse — обратно-туда (назад, потом вперёд)

7. animation-fill-mode

Определяет, какие стили применяются до и после анимации:

• none — не применяются (по умолчанию)
• forwards — после анимации остаются стили из конечного состояния (100%)
• backwards — до анимации применяются стили из начального состояния (0%)
• both — и forwards, и backwards

8. animation-play-state

Состояние анимации:

• running — анимация идёт (по умолчанию)
• paused — анимация приостановлена

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

.element:hover {
  animation-play-state: paused;
}

Короткая запись

Вместо всех свойств можно использовать короткую запись:

.element {
  animation: slideIn 1s ease-out 0.5s 3 both;
}

Порядок: название, длительность, функция времени, задержка, количество повторений, fill-mode.

Анимация появления

Самая популярная анимация — плавное появление элементов. Создадим универсальную анимацию:

Как это работает:

• Элемент начинается невидимым и сдвинутым вниз на 30px
• Плавно появляется (opacity: 0 → 1) и поднимается на своё место (translateY(30px) → 0)
• Создаётся эффект "выплывания" снизу

Анимация при наведении

Hover анимации показывают, что элемент интерактивен:

Разберём hover эффекты:

• transform: translateY(-3px) — поднимает кнопку на 3px (эффект "поднятия")
• scale(1.05) — увеличивает кнопку на 5%
• box-shadow — добавляет тень (усиливает эффект поднятия)
• :active — состояние при нажатии (кнопка немного опускается)

Что такое transition? transition делает изменение свойств плавным. Без transition изменения происходят мгновенно.

Производительность анимаций

Важно! Не все свойства анимируются одинаково хорошо. Некоторые свойства вызывают "reflow" (пересчёт макета) или "repaint" (перерисовку), что замедляет анимацию.

✅ Хорошие свойства для анимации:

• transform (translate, scale, rotate) — обрабатывается GPU, очень быстро
• opacity — тоже обрабатывается GPU

❌ Плохие свойства для анимации:

• width, height — вызывают reflow
• top, left, right, bottom — вызывают reflow
• margin, padding — вызывают reflow
• background-color — вызывает repaint

Правило: Используйте transform и opacity для анимаций. Они самые быстрые!

// ✅ Хорошо
.element {
  transform: translateX(100px);
  will-change: transform; // Подсказка браузеру
}

// ❌ Плохо
.element {
  left: 100px; // Вызывает reflow
}

Что такое will-change? Это свойство подсказывает браузеру, что свойство будет изменяться. Браузер может заранее оптимизировать элемент. Но не злоупотребляйте — используйте только для элементов, которые действительно будут анимироваться.

Практическое задание

1. Создайте анимацию появления для карточек (fadeInUp)
2. Добавьте hover анимацию для кнопок (поднятие и тень)
3. Создайте анимацию загрузки (spinner) с помощью rotate
4. Создайте анимацию пульсации для важных элементов
5. Оптимизируйте анимации для производительности (используйте transform и opacity)
6. Добавьте задержки для последовательного появления элементов

Что дальше?

Отлично! Теперь вы умеете создавать красивые анимации. В следующем модуле мы начнём изучать JavaScript и создавать интерактивные элементы: слайдеры, табы, модальные окна и многое другое!