@keyframes: движение без повода

Переход едет между двумя состояниями, и запускает его перемена: отметили флажок — полоса поехала. У значка загрузки перемены нет, он просто крутится, и ждать повода ему неоткуда. Для такого движения нужны две вещи. Правило @keyframes даёт кадрам имя и записывает, каким элемент будет в начале и в конце: @keyframes grow { from { width: 0; } to { width: 200px; } }. Свойство animation вешает эти кадры на элемент: animation: grow 300ms linear — имя, длительность, плавность.

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

Анимация начинается сама, как только правило досталось элементу. Ни щелчка, ни замера перед ним, как у перехода, не нужно: «было» записано в from. Проверять движение будем тоже стоп-кадром. Отрицательная задержка -150ms запускает анимацию так, будто она идёт уже 150 мс, — при длительности 300ms это половина времени. Слово paused останавливает анимацию на этом месте. Без него она поехала бы дальше, и число зависело бы от того, сколько кадров успела нарисовать вкладка.

У двух полос ниже одинаковые кадры, длительность и стоп-кадр. Плавность linear указана только у первой, с классом even. Предскажите обе строки: полпути по времени — это полпути по дороге? И одинаково ли стоят полосы?

<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <title>Ключевые кадры и свойство animation</title>
  <style>
  @keyframes grow { from { width: 0; } to { width: 200px; } }
  .bar { height: 10px; background: steelblue; animation: grow 300ms paused; animation-delay: -150ms; }
  .even { animation-timing-function: linear; }
</style>
</head>
<body>

<div class="bar even"></div>
<div class="bar"></div>
</body>
</html>

measure(".even", "width");
same(".bar", "width");

Прежде чем крутить что-то дальше — о тех, кто на это смотрит. Людям с расстройствами вестибулярного аппарата крупное движение на экране приносит головокружение и тошноту, а бесконечное движение рядом с текстом мешает сосредоточиться — например, людям с синдромом дефицита внимания. Поэтому в системе есть настройка уменьшения движения: в macOS она в «Универсальном доступе», в Windows это выключатель эффектов анимации в специальных возможностях, есть она и на телефонах. Браузер передаёт её странице медиазапросом prefers-reduced-motion — и страница может на неё ответить.

Правила внутри @media (prefers-reduced-motion: reduce) { … } действуют, только когда настройка включена. Это Baseline widely с 15.07.2022. Свод правил доступности WCAG 2.2 в критерии 2.3.3, уровня AAA, требует, чтобы движение, запущенное действием человека, можно было отключить, если оно не нужно для смысла, — и медиазапрос как раз простой способ это выполнить. Решает человек, а автор только выбирает, что делать с его просьбой: выключить движение, замедлить или заменить спокойным.

Ниже значок загрузки и полоса прогресса. Значок крутится по-настоящему: у spin только кадр to с полным оборотом, rotate: 360deg, а начало браузер берёт из обычного стиля значка, где поворота нет. Слово infinite повторяет круг без конца. Полоса — стоп-кадр на половине, как в первом разделе. Правило в @media снимает анимацию со значка. Предскажите строку — и изменится ли она у читателя, у которого настройка включена?

<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <title>Меньше движения по просьбе человека</title>
  <style>
  @keyframes spin { to { rotate: 360deg; } }
  @keyframes grow { from { width: 0; } to { width: 200px; } }
  .spinner { width: 20px; height: 20px; margin-bottom: 10px; background: steelblue; animation: spin 1s linear infinite; }
  .bar { height: 10px; background: steelblue; animation: grow 300ms linear paused; animation-delay: -150ms; }
  @media (prefers-reduced-motion: reduce) {
    .spinner { animation: none; }
  }
</style>
</head>
<body>

<div class="spinner"></div>
<div class="bar"></div>
</body>
</html>

measure(".bar", "width");

Проверьте обе ветки сами, это занимает минуту. Включите в системе уменьшение движения и запустите пример снова: значок встанет. Без похода в настройки ту же просьбу умеет изобразить Chrome: в инструментах разработчика откройте вкладку Rendering — её находит поиск команд, Ctrl+Shift+P или Cmd+Shift+P, — и в пункте Emulate CSS media feature prefers-reduced-motion выберите prefers-reduced-motion: reduce.

Можно зайти и с другой стороны: включать движение только тем, кто меньше не просил, — правилами внутри @media (prefers-reduced-motion: no-preference) { … }. Какой путь ни выбери, прогресс и другие сведения оставляют на экране: выключается движение, а не информация.

Ту же настройку читает и JavaScript, методом matchMedia. В части II так решают, прокручивать плавно или сразу.

Кроме имени, длительности и плавности у animation есть ещё части. Каждая пишется словом в общей записи или отдельным свойством с приставкой animation-, как animation-delay в примерах. Из двух времён в общей записи первое — длительность, второе — задержка.

Главная ловушка — в строке «заполнение». Кадры действуют на элемент, только пока анимация идёт. Кончилась — и элемент возвращается к обычным стилям, будто кадров не было: полоса, выросшая до 200px, прыгает назад, и выглядит это как ошибка, хотя всё работает как написано. Слово forwards оставляет на месте последний кадр.

Проверим стоп-кадром после конца. Задержка -400ms при длительности 300ms ставит анимацию туда, где она уже 100 мс как закончилась. Обычная ширина у обеих полос — 50px, forwards только у второй. Предскажите строку.

<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <title>Круги, направление и конец анимации</title>
  <style>
  @keyframes grow { from { width: 0; } to { width: 200px; } }
  .bar { width: 50px; height: 10px; background: steelblue; animation: grow 300ms linear paused; animation-delay: -400ms; }
  .keep { animation-fill-mode: forwards; }
</style>
</head>
<body>

<div class="bar"></div>
<div class="bar keep"></div>
</body>
</html>

measure(".bar", "width");

У forwards есть обратная сторона, и она дороже самой ловушки. Значение анимации — и идущей, и удержанной — сильнее обычных правил: полосу с forwards не сузит класс с width: 30px, добавленный потом, и перебьёт её только !important. Поэтому итоговое значение часто пишут прямо в стиль элемента, а в кадрах оставляют только from: конец анимация возьмёт из обычного стиля, как spin выше брал из него начало, и после анимации элемент останется таким же.

Анимация кончилась — элемент вернулся к своим стилям. Нужен последний кадр навсегда — forwards, но удержанный кадр сильнее ваших обычных правил. Надёжнее записать итог в сам стиль элемента, а кадрам оставить from.

from и to — другие имена для 0% и 100%. Между ними можно поставить сколько угодно кадров в процентах времени: 50% { width: 50px; } значит «к половине времени — 50px». А похожую кривую умеет рисовать и плавность: функция linear() из статьи о переходах работает в анимации так же, linear(0, 0.25 50%, 1) — к половине времени четверть пути.

У трёх полос ниже стоп-кадр на половине времени. Первая едет по двум кадрам с linear. У второй те же два кадра, но плавность linear(). У третьей плавность linear, а кадров три, с серединой на 50px. Предскажите три ширины.

<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <title>Кадры посередине и плавность</title>
  <style>
  @keyframes grow { from { width: 0; } to { width: 200px; } }
  @keyframes late { 0% { width: 0; } 50% { width: 50px; } 100% { width: 200px; } }
  .bar { height: 10px; background: steelblue; animation: grow 300ms linear paused; animation-delay: -150ms; }
  .curve { animation-timing-function: linear(0, 0.25 50%, 1); }
  .mid { animation-name: late; }
</style>
</head>
<body>

<div class="bar"></div>
<div class="bar curve"></div>
<div class="bar mid"></div>
</body>
</html>

measure(".bar", "width");

И ловушка на стыке двух способов. Плавность действует не на всю анимацию, а на каждый отрезок между соседними кадрами. С ease и кадрами 0%, 50% и 100% полоса разгонится и затормозит дважды — на подходе к 50px и на подходе к 200px, — и движение выйдет дёрганым, хотя каждое число на своём месте. Нужна одна кривая на всю анимацию — оставьте два кадра и опишите путь плавностью.

Круг загрузки, который заполняется по часовой стрелке, рисуют градиентом: conic-gradient(steelblue 25%, silver 0) закрашивает синим первую четверть круга, а остальное серым. Сам градиент в кадрах не поедет: Chrome и Firefox середину между двумя градиентами не ищут, и он сменится скачком, как display. Ехать может число внутри градиента — если вынести его в переменную.

Свойство, чьё имя начинается с двух дефисов, например --p, — пользовательское. Сам браузер его ни к чему не применяет, а подставляет значение туда, где написано var(--p). Откуда такие свойства взялись и как ими пользуются, разберёт следующая тема главы — переменные CSS. Здесь важно одно: для браузера значение переменной — просто текст. В кадрах можно написать --p: 0% и --p: 100%, но что это проценты, браузер не знает и середину не ищет: на половине времени текст сменится скачком.

Правило @property регистрирует переменную и объявляет её тип. syntax: "<percentage>" — значение всегда проценты, inherits: false — не брать значение у родителя, initial-value: 0% — значение, пока никто не задал своего. Зная тип, браузер умеет считать середину и ведёт переменную плавно.

Ниже два одинаковых круга с одинаковыми кадрами, border-radius: 50% скругляет квадрат в круг. Стоп-кадр стоит на четверти времени. Круг .p закрашен зарегистрированной переменной --p, круг .q — переменной --q, которую не регистрировали. Предскажите обе строки.

<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <title>@property: переменная, которая едет</title>
  <style>
  @property --p { syntax: "<percentage>"; inherits: false; initial-value: 0%; }
  @keyframes fill { from { --p: 0%; --q: 0%; } to { --p: 100%; --q: 100%; } }
  .ring { width: 40px; height: 40px; border-radius: 50%; animation: fill 1s linear paused; animation-delay: -250ms; }
  .p { background: conic-gradient(steelblue var(--p), silver 0); }
  .q { background: conic-gradient(steelblue var(--q), silver 0); }
</style>
</head>
<body>

<div class="ring p"></div>
<div class="ring q"></div>
</body>
</html>

measure(".p", "--p");
measure(".q", "--q");

@property — Baseline newly с 09.07.2024: знайте о нём, но не делайте условием работы страницы. Браузер, который правила не знает, оставит переменную текстом, и круг заполнится скачком: выглядит хуже, смысл тот же.

Переменная без @property — текст: в анимации она прыгает на середине времени. С @property у неё есть тип, браузер ведёт её плавно, и вместе с ней едет всё, куда её подставили.

Ключевые кадры — запись, сделанная заранее: путь и время известны до первого кадра. Всё, что решается по ходу движения, CSS уже не анимирует.

Такое движение считает скрипт, кадр за кадром. В React, в части IV, это берёт на себя библиотека Motion — её разбирает статья про анимацию исчезновения и раскладки. Раньше она называлась Framer Motion, и под старым именем выходит тот же пакет, а в новых проектах ставят motion: в коде он появится как motion/react. Её автор сам разбирал, в чём CSS библиотеку догнал, — например, в появлении элемента, отдельных трансформациях и простых пружинах через linear(). А где не догнал: пружина из linear() не подхватывает скорость жеста или прерванного движения. Отсюда порядок: сначала CSS, библиотека — когда движение зависит от того, что делает человек.

Два соседних механизма есть не везде. Анимацию, которая идёт не по времени, а по прокрутке (animation-timeline), умеют Chrome 115+ и Safari 26, а Firefox — нет: это limited. Управлять анимацией из JavaScript — остановить, развернуть, дождаться конца — позволяет Web Animations API, Baseline widely с 16.03.2023. Это уже не пролог.

Как пружина устроена изнутри, покажет часть V, в React Native: сначала движение из значения, подписки и кадра, потом пружина без длительности в Animated. Там же — жесты: касание, сдвиг и свайп.