Анимация в CSS с @keyframes — руководство

Пример анимированной кнопки: превращение прямоугольной зелёной кнопки в синюю круглую

Источник изображения: Josh Riemer / Unsplash

Что такое анимация в CSS и зачем она нужна

Анимация в CSS позволяет оживить интерфейс без JavaScript: плавные переходы, визуальная обратная связь и микроанимации повышают понятность и эстетичность страницы. Ключевой механизм — правило @keyframes, которое описывает, как изменяются CSS-свойства во времени.

Определение термина: @keyframes — правило CSS, задающее набор «ключевых кадров» (состояний) элемента и его внешний вид в эти моменты времени.

Короткая памятка: анимируются свойства, которые браузер может композитить (как transform и opacity) — это быстрее и дешевле по ресурсам. Свойства вроде width/height или top/left вызывают перерасчёт макета и могут приводить к тормозам.

Какие свойства обычно анимируют

width
height
position (top/left/right/bottom)
color, background-color
opacity
transform (translate, scale, rotate)

Важно: предпочтительно анимировать transform и opacity для производительности. Если нужно изменить форму, чаще используйте border-radius и transform, а не перерасчёт layout.

Структура @keyframes — пример и объяснение

@keyframes описывает состояние элемента в ключевые моменты. Существует два простых варианта записи: специальные ключевые слова from/to или проценты (0%–100%).

Пример структуры:

@keyframes identifier {
  from {
    /* откуда начинается анимация */
  }
  to {
    /* куда приходит анимация */
  }
}

Или эквивалент с процентами:

@keyframes identifier {
  0% {
    /* начальное состояние */
  }
  50% {
    /* промежуточное состояние */
  }
  100% {
    /* конечное состояние */
  }
}

Практическая подсказка: используйте промежуточные ключевые кадры для сложных эффектов (удар, подпрыгивание, «bounce»), а для простых преобразований хватит from/to.

Пример: анимация кнопки — шаг за шагом

Задача: сделать зелёную прямоугольную кнопку, которая превращается в синюю круглую.

HTML + CSS пример (локализованные комментарии):






Animation

Пояснение: свойство animation связывает набор ключевых кадров (clickButton) с элементом и задаёт, как именно и когда будет происходить переход.

Пять основных подсвойств animation

На практике достаточно знать пять подсвойств, чтобы управлять поведением анимации:

animation-name — имя @keyframes
animation-duration — длительность (например, 2s, 500ms)
animation-timing-function — функция ускорения (ease, linear, ease-in, ease-out и пр.)
animation-delay — задержка до старта
animation-iteration-count — число повторов (число или infinite)

animation-name

Обязательное логическое связующее: без имени анимации браузеру некуда «подключить» @keyframes, и всё остальное не сработает.

animation-duration

Определяет, сколько времени займёт переход от начального состояния к конечному.

Пример: 5s — анимация займёт 5 секунд.

animation-delay

Добавляет паузу перед началом анимации. Это полезно, если страница может загружаться долго, и вы хотите подождать.

Пример: 4s — анимация начнётся через 4 секунды после загрузки/вставки элемента.

animation-iteration-count

Сколько раз повторять анимацию. Можно задать число (1, 2, 3…) или infinite.

Пример: infinite — цикл будет повторяться постоянно.

animation-timing-function

Функция, описывающая скорость анимации во времени. Часто используемые значения:

ease-in — замедление в начале (ускорение)
ease-out — замедление в конце
ease-in-out — медленнее в начале и в конце
linear — равномерная скорость

Совет: для более контролируемых эффектов используйте cubic-bezier() или steps() при необходимости.

Сокращённая запись animation

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

.btn{
  animation: clickButton 5s ease-in-out 4s infinite;
}

Порядок в сокращённой записи обычно: name duration timing-function delay iteration-count direction fill-mode play-state. Необязательные параметры можно опускать, браузер подставит значения по умолчанию.

Практические рекомендации и лучшие практики

Анимируйте transform и opacity, а не width/height или position, если нужна производительность.
Для сложных последовательностей используйте ключевые кадры с промежуточными шагами (например, 0%, 30%, 60%, 100%).
Добавляйте prefers-reduced-motion для пользователей с ограниченной переносимостью анимаций.
Используйте will-change с осторожностью — оно подготавливает элемент к изменению, но может повышать потребление памяти.
Тестируйте на мобильных устройствах: длительные анимации могут негативно влиять на батарею.

Пример prefers-reduced-motion:

@media (prefers-reduced-motion: reduce) {
  .btn {
    animation: none;
  }
}

Важно: уважайте настройки пользователя — если в системе включено «сократить движение», остановите или упростите анимации.

Когда анимация на @keyframes не подойдёт (контр-примеры)

Когда нужно анимировать только при наведении или однократном действии — подойдёт CSS transition.
Для сложной временной синхронизации или управления во время выполнения (пауза/перезапуск) лучше использовать Web Animations API или JavaScript.
Если анимация затрагивает layout и ведёт к багам на старых устройствах — рассмотрите анимацию с position: absolute и transform.

Альтернативные подходы

CSS transition — проще и подходит для «от/до» при взаимодействии.
Web Animations API — даёт программный контроль (пауза, обратный проигрыш, синхронизация нескольких анимаций).
JS-библиотеки (например, GSAP) — дополнительные возможности для комплексных сцен и кроссбраузерной поддержки; но это внешние зависимости.

Ментальные модели и эвристики

Разделяй и властвуй: отделяйте визуальные эффекты (transform, opacity) от изменений структуры (width/height).
Простое правило 80/20: 80% эффектов решаем transform и opacity, остальные 20% требуют манипуляций с layout.
Думайте в кадрах: сначала набросайте ключевые кадры (0%, 50%, 100%), затем доводите timing-function и задержки.

Таблица сравнения: transition vs animation vs Web Animations API

Transition: простая «от–до» реакция на изменение состояния (hover, class). Легко, но ограничено.
Animation (@keyframes): независимая анимация с собственным временем жизни, повторениями и сложной синхронизацией.
Web Animations API: программный контроль, пауза/перезапуск, точная синхронизация, но требует JS.

Чек-листы по ролям

Для разработчика:

Проверил производительность (chrome devtools — вкладка Performance).
Использовал transform/opacity где возможно.
Добавил prefers-reduced-motion.

Для дизайнера:

Определил ключевые кадры и длительности.
Убедился, что анимация не мешает читаемости.

Для QA:

Проверил поведение при разных скоростях сети и на мобильных.
Проверил взаимодействие с клавиатурой и screen-reader.

Набор полезных сниппетов / cheat sheet

Короткая запись animation: animation: ;
Остановка анимации: animation-play-state: paused;
Задание fill-mode (сохранение конечного состояния): animation-fill-mode: forwards;

Совместимость и миграция

Современные браузеры поддерживают @keyframes и animation без префиксов. Ранее использовались -webkit- префиксы для старых версий Safari/Chrome. Если вам нужна поддержка очень старых браузеров, добавьте префиксы:

@-webkit-keyframes example { /* ... */ }
@keyframes example { /* ... */ }

Однако для современного кодового пула префиксы обычно не требуются.

Примеры тест-кейсов (acceptance)

Кнопка должна начать анимацию через заданную задержку.
При infinite анимация повторяется как минимум три раза за наблюдаемый период.
При prefers-reduced-motion анимация отключена.

Мини-методология для введения анимаций в проект (SOP)

Определите цель анимации (внимание, обратная связь, украшение).
Нарисуйте ключевые кадры и выберите длительность.
Реализуйте @keyframes и привяжите animation к элементам.
Тестируйте производительность и доступность.
Итеративно улучшайте, опираясь на метрики UX и фидбек.

FAQ

В: Что делать, если анимация тормозит на мобильных?

О: Уменьшите количество одновременно анимируемых элементов, используйте transform/opacity и уберите лишние repaint’ы; профильте с DevTools.

В: Как паузить/возобновлять анимацию?

О: Используйте animation-play-state: paused/ running или управляйте через JavaScript (элемент.style.animationPlayState).

В: Как вернуть элемент в финальное состояние после анимации?

О: Примените animation-fill-mode: forwards, тогда элемент сохранит стили из последнего ключевого кадра.

JSON-LD (FAQ)

Секция FAQ ниже представлена в формате разметки JSON-LD в метаданных страницы.

Краткое резюме

@keyframes задаёт набор ключевых состояний; animation связывает их с элементом.
Предпочитайте transform и opacity для производительности.
Используйте сокращённую запись animation для компактности и воспринимайте prefers-reduced-motion ради доступности.