CSS animation — синтаксис и примеры
CSS-свойство animation: назначение, рабочее значение, влияние на раскладку или отрисовку, ошибки и поддержка браузерами.
Назначение и границы
Назначение «animation» раскрывается через задачу «изменять визуальное положение или переход между состояниями интерфейса». Запускает набор ключевых кадров с заданным временем и повторением. Для воспроизводимой проверки «animation» используйте пример в форме, где часть полей становится недоступной и наблюдайте победившую декларацию во вкладке Computed.
Для «animation» сначала проверьте начальное и конечное состояние, а также режим уменьшенного движения. После этого сравните исходное и изменённое состояние «animation» на одном и том же содержимом.
Синтаксис animation
Пример «animation» оставляет только контекст, необходимый для области «движение и преобразования». Измените одно значение и проследите результат в браузере.
.demo {
animation: pulse 1s ease-in-out infinite alternate;
}Как работает animation
Браузер обрабатывает «animation» в контексте области «движение и преобразования»: запускает набор ключевых кадров с заданным временем и повторением. Для «animation» наблюдения через победившую декларацию во вкладке Computed и состояние при пустом содержимом отделяют исходное условие от результата.
Проверка в проекте
- Проверьте начальное и конечное состояние, а также режим уменьшенного движения; результат относится непосредственно к «animation».
- Проверить длинный текст, пустое значение и отсутствие необязательного ресурса при разборе «animation».
- Проверьте «animation» в форме, где часть полей становится недоступной через победившую декларацию во вкладке Computed и запишите наблюдаемое изменение.
Выбор «animation» оправдан, если задача относится к области «движение и преобразования», а риск «бесконечная декоративная анимация отвлекает и расходует ресурсы» исключён проверкой. Для «animation» сравнивайте не внешний вид, а результат для пользователя.
Практика с animation
Перенесите «animation» в тестовом шаблоне и испытайте его в форме, где часть полей становится недоступной. Сначала воспроизведите правильный результат, затем намеренно добавьте риск для «animation»: бесконечная декоративная анимация отвлекает и расходует ресурсы.
Сценарий: в форме, где часть полей становится недоступной.
Ошибки при работе с animation
Поддержка
Бесконечная декоративная анимация отвлекает и расходует ресурсы — это предметный риск для «animation».
Контекст
Проверка только мышью и только на широком экране при использовании «animation».
Устойчивость
Загрузка тяжёлого ресурса до того, как он нужен пользователю; для «animation» проверьте это отдельно.
Поддержка animation
Для «animation» таблица собрана из закреплённой версии MDN Browser Compatibility Data. Указанная версия браузера показывает первое заявленное появление базовой поддержки «animation»; окончательное решение принимайте по аудитории конкретного проекта.
Спецификация: источник 1.
Вопросы о animation
Как понять, что «animation» выбрано правильно?
«animation» выбрано правильно, когда оно решает задачу «изменять визуальное положение или переход между состояниями интерфейса», сохраняет результат в форме, где часть полей становится недоступной и проходит предметную проверку: проверьте начальное и конечное состояние, а также режим уменьшенного движения.
Нужен ли запасной вариант для «animation»?
Запасной вариант для «animation» нужен, если целевой браузер или режим не обеспечивает выбранное поведение. Без улучшения «animation» должно сохранять смысл, содержимое и основное действие.
Спецификации и источники
Синтаксис и статус проверяются по HTML Living Standard, спецификациям CSS и MDN Browser Compatibility Data. Примеры и объяснения подготовлены для этого сервиса.