Переходы transition хороши, но у них есть предел: они анимируют изменение из одного состояния в другое и только при каком-то событии — наведении, фокусе. А что, если нужно, чтобы элемент двигался сам, без действий пользователя? Плавно появлялся при загрузке страницы, мигал, пульсировал, крутился в виде индикатора загрузки? Для этого есть настоящие анимации на ключевых кадрах: правило @keyframes описывает, как элемент выглядит в разные моменты, а свойство animation проигрывает это. Так рождаются самостоятельные, повторяющиеся и многоступенчатые движения.

После этого урока вы сможете создавать анимации, которые запускаются сами и проходят через несколько состояний — например, эффект плавного появления секции при открытии страницы.

Что уже умеем / что добавим

Вы умеете плавно менять стиль по событию через transition. Но переход всегда «из А в Б» и по действию пользователя. Теперь добавим анимации, которые работают сами и могут иметь несколько промежуточных кадров. В сквозном проекте мы сделаем так, чтобы секция сайта компании плавно появлялась при загрузке страницы.

Что вы узнаете в рамках статьи

• Что такое @keyframes и как описать кадры анимации.
• Как запускать анимацию свойством animation.
• Чем анимация отличается от перехода transition.
• Как задать несколько промежуточных состояний в процентах.

Ключевые термины

• @keyframes — правило, описывающее ключевые кадры анимации.
• Ключевой кадр — состояние элемента в определённый момент анимации (from, to или проценты).
• animation-name — имя набора ключевых кадров, который проигрывается.
• animation-duration — длительность одного проигрывания анимации.
• animation — краткая запись всех параметров анимации сразу.

Правило @keyframes

Анимация начинается с описания кадров. Правило @keyframes задаёт имя анимации и перечисляет состояния: как минимум начальное (from) и конечное (to). Внутри каждого — обычные CSS-свойства:

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

Мы описали анимацию с именем fade-in: в начале элемент полностью прозрачен (opacity: 0), в конце — полностью видим (opacity: 1). Само по себе это правило ничего не делает — оно лишь описывает «сценарий». Чтобы анимация проигралась, её нужно применить к элементу. Имя (fade-in) вы придумываете сами — по нему потом обращаются к этому набору кадров.

Запуск: свойство animation

Чтобы проиграть анимацию, элементу задают свойство animation с именем набора кадров и длительностью:

.box {
  animation: fade-in 0.6s;
}

Как только элемент появится на странице, браузер проиграет анимацию fade-in за 0,6 секунды — блок плавно проявится из прозрачного в видимый. Не нужно никакого наведения или клика: анимация стартует сама. В краткой записи animation первым идёт имя, затем длительность (порядок как у transition). Это минимальный набор; в следующем уроке мы разберём дополнительные параметры — задержку, повтор, направление.

Чем анимация отличается от перехода

Важно понимать разницу между transition и animation, ведь оба дают движение. transition анимирует переход между двумя состояниями и запускается по изменению (наведение, смена класса) — он реагирует. animation проигрывает заранее описанный сценарий из @keyframes и может запускаться сам, повторяться и проходить много промежуточных кадров — он самостоятелен.

Простое правило выбора: если движение — это отклик на действие пользователя между двумя состояниями (кнопка при наведении), берите transition. Если нужно самостоятельное, повторяющееся или многоступенчатое движение (пульсация, индикатор загрузки, появление при старте), берите animation с @keyframes. Они не конкурируют, а дополняют друг друга — как Flexbox и Grid.

Несколько кадров в процентах

from и to — это удобные псевдонимы для 0% и 100%. Но анимация может проходить через несколько промежуточных состояний, и тогда кадры задают в процентах:

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

.badge {
  animation: pulse 1.5s;
}

Здесь анимация pulse проходит три кадра: в начале и в конце элемент обычного размера, а в середине (50%) немного увеличен. Получается эффект «вздоха» — элемент плавно вырастает и возвращается. Процентами можно описать сколько угодно кадров (0%, 25%, 50%, 75%, 100%), выстраивая сложные многоступенчатые движения. Значения from/to удобны для простых двухкадровых анимаций, а проценты — для всего остального.

Применяем в проекте

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

@keyframes appear {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.section {
  animation: appear 0.6s ease-out;
}

Обновите страницу: секция не появляется мгновенно, а плавно проявляется, слегка поднимаясь на своё место снизу. Мы описали два кадра — «прозрачно и чуть ниже» и «видимо и на месте» — а браузер сам проиграл переход между ними при загрузке. Такой мягкий вход сразу делает страницу более отточенной и современной. В следующих уроках мы научимся управлять этим движением тоньше.

Частые ошибки

• Забыть применить анимацию.
  @keyframes только описывает кадры; без свойства animation у элемента ничего не проиграется.
• Опечатка в имени.
  Имя в animation должно точно совпадать с именем в @keyframes, иначе анимация не найдётся.
• Нет длительности.
  Без animation-duration длительность равна нулю и анимация не видна; всегда задавайте время.
• Анимация вместо перехода.
  Для простого отклика на наведение transition проще и уместнее, чем @keyframes.

Итоги

Замечательно — вы создали свою первую настоящую анимацию! Теперь вы умеете описывать ключевые кадры через @keyframes, запускать анимацию свойством animation, понимаете разницу между animation и transition и можете задавать несколько промежуточных состояний в процентах. В сквозном проекте секция сайта компании стала плавно появляться при загрузке — эффект, который сразу выделяет качественный интерфейс.

Отличный старт во втором разделе — ваши страницы ожили по-настоящему! В следующем уроке мы научимся управлять анимацией тоньше: задавать задержку, число повторов, направление и поведение до и после проигрывания через animation-fill-mode.