animation-name связывает элемент с конкретным правилом @keyframes по имени - без этого свойства даже готовое @keyframes так и останется просто описанием, никак не подключённым к странице. Если имя не совпадает ни с одним @keyframes (опечатка, не тот регистр), браузер не ругается - он просто ничего не анимирует. Можно подключить сразу несколько анимаций через запятую, и можно явно отключить анимацию словом none.
В этом уроке
Попробуй прямо сейчас: у квадрата написано animation-name: bounce - и он подпрыгивает, потому что рядом описано @keyframes bounce. Ниже в коде уже готово ещё одно правило - @keyframes spin (поворот на 360 градусов). Поменяй всего одну строку - animation-name: bounce на animation-name: spin - и квадрат вместо прыжков начнёт крутиться, хотя сам @keyframes spin в коде никак не менялся. Длительность, повтор и плавность анимации (остальные три строки) - тема следующих уроков, здесь они добавлены по минимуму, только чтобы демонстрацию было видно.
Как подключить @keyframes через animation-name
Само по себе @keyframes из прошлого урока ничего не анимирует - оно оживает, только когда у элемента появляется animation-name с точно таким же именем. Собственная проверка показала, что браузер сравнивает имена РЕГИСТРОЗАВИСИМО: @keyframes Bounce (с большой буквы) и animation-name: bounce (с маленькой) - это два разных имени, и анимация просто не запустится, без единой ошибки в консоли. Ровно так же ничего не произойдёт при обычной опечатке в имени - и это не редкость: в реальном вопросе на Хабре (см. FAQ) разработчик указал animation-name: play_up, а @keyframes на самом деле назывались play_top и play_down - анимация в одном браузере молчала именно поэтому. Есть и специальное значение none: animation-name: none явно отключает анимацию у элемента, даже если подходящее @keyframes существует где-то в таблице стилей.
@keyframes pulse { 50% { transform: scale(1.1); } }
.card { animation-name: pulse; } - имена совпадают буква в букву, анимация подключена.
Неправильный ход - положиться на память вместо проверки в блокноте:
@keyframes Pulse { 50% { transform: scale(1.1); } }
.card { animation-name: pulse; } - Pulse и pulse - разные имена из-за регистра, анимация не запустится, и никакой ошибки видно не будет.
Несколько анимаций сразу и повторяющееся имя
В animation-name можно перечислить несколько имён через запятую - animation-name: a, b - и обе анимации запустятся на одном элементе одновременно, каждая по своему @keyframes. Если имён в animation-name больше, чем значений в animation-duration, короткий список зацикливается с начала - собственная проверка подтвердила: при трёх именах и двух длительностях третье имя просто получает первую длительность заново. Это тот же самый механизм, что уже встречался в уроке про transition-property с несовпадающими по длине списками свойств и длительностей. Отдельная тонкость - что происходит, если одно и то же имя @keyframes описано в таблице стилей дважды. Из прошлого урока ты знаешь, что повторяющийся ПРОЦЕНТ внутри ОДНОГО правила складывается по свойствам. А вот повторяющееся ИМЯ целого правила @keyframes работает иначе: собственная проверка показала, что более позднее определение ПОЛНОСТЬЮ заменяет более раннее - если первое @keyframes grow анимировало width, а второе (с тем же именем) - height, в итоге будет анимироваться только height, а width останется на месте, как будто первого определения никогда не было.
.card {
animation-name: fade, slide;
animation-duration: 2s, 1s;
} - обе анимации подключены и у каждой своя длительность.
Неправильное ожидание - что повторное имя @keyframes добавит новые свойства к первому:
@keyframes grow { from { width: 50px; } to { width: 200px; } }
@keyframes grow { from { height: 50px; } to { height: 150px; } } - второе определение ПОЛНОСТЬЮ заменяет первое: в итоге меняется только height, а width вообще не анимируется.
Частые ошибки новичков
| Ошибка | Что происходит | Как исправить |
|---|---|---|
| Опечатка или несовпадение регистра между animation-name и именем @keyframes | Анимация не запускается вообще, и ошибки в консоли нет - имена просто не совпали | Сверять оба имени внимательно, включая регистр букв, при любой странности проверять в блокноте |
| Пытаться описать @keyframes прямо в атрибуте style="" элемента | @keyframes - это правило уровня таблицы стилей, оно не работает внутри строки инлайн-стилей | Всегда выносить @keyframes в тег <style> или отдельный CSS-файл |
| Определить @keyframes с одним и тем же именем дважды, ожидая, что они СЛОЖАТСЯ | Более позднее определение ПОЛНОСТЬЮ заменяет более раннее целиком - это не то же самое, что повторяющийся процент внутри одного правила из прошлого урока | Использовать разные имена для разных наборов кадров, не полагаться на дублирование имени |
| Указать в animation-name больше имён, чем значений в animation-duration | Короткий список длительностей зацикливается с начала - лишние имена получают уже использованные значения заново | Указывать длительность явно для каждого имени или сознательно рассчитывать на цикличность списка |
Шпаргалка
| Запись | Что означает |
|---|---|
| animation-name: bounce; | Подключает @keyframes bounce к элементу |
| animation-name: none; | Явно отключает анимацию у элемента |
| Имя не совпадает ни с одним @keyframes | Ничего не происходит, ошибки в консоли нет |
| animation-name: a, b; | Одновременно запускает две анимации на одном элементе |
| Одно и то же имя @keyframes дважды | Более позднее определение полностью заменяет более раннее (не складывается) |
| Меньше значений animation-duration, чем имён | Список длительностей зацикливается с начала (как в transition-property/duration) |
Коротко: отвечаем на вопросы
Анимация работает в Chrome, но не работает в Firefox. Может ли дело быть в имени?
Да, и это реальный случай: у одного разработчика animation-name для Firefox указывал play_up, а сами @keyframes назывались play_top и play_down - имя play_up нигде не было описано, поэтому в Firefox анимация не запускалась. Первым делом при "анимация не работает в одном браузере" стоит буква в букву сверить название в animation-name и в @keyframes, а не искать проблему в вендорных префиксах.
Можно ли описать @keyframes прямо в атрибуте style у тега, чтобы не заводить отдельный класс?
Нет - @keyframes является правилом уровня таблицы стилей, а не обычным CSS-свойством, и внутри строки инлайн-стилей такая запись просто не работает. @keyframes обязательно нужно вынести в тег <style> в head или body страницы (или в отдельный подключённый CSS-файл) - тогда к элементу достаточно приложить animation-name, и он может остаться хоть в инлайн-стиле.
