animation-fill-mode: заполнение

Состояние до/после анимации: none, forwards, backwards, both.

Уровень: средний 10 разделов 10 минут

1. Что это и зачем

Состояние до/после анимации: none, forwards, backwards, both.

Переходы анимируют изменение свойств между состояниями, а @keyframes задаёт многошаговую сцену. Браузер интерполирует значения по кривой (timing function) и рисует кадры на композиторе.

{title} — украшение, а не смысл: движение должно этим помогать, а не тормозить пользователя.

2. Синтаксис и пример

.pop { animation: pop .4s both; }

Запись выше — базовый вариант использования. Обратите внимание, как animation-fill-mode: заполнение вписывается в структуру документа: рядом с другими элементами он ведёт себя по правилам каскада и наследования, которые разобраны в курсе CSS.

3. Нюансы и частые варианты

transition удобна для hover, animation — для циклов и появления. Не анимируйте layout-свойства — только transform и opacity. Паузу и стадии переключает play-state.

В реальной разметке animation-fill-mode: заполнение встречается в связке с другими тегами и классами: компонентная разметка (БЭМ) и переменные из базового CSS-курса помогают держать такие случаи под контролем без дублирования правил.

4. Как это работает под капотом

{title} — украшение, а не смысл: движение должно этим помогать, а не тормозить пользователя.

Если какое-то свойство ведёт себя неожиданно, откройте DevTools: вкладка Computed показывает, какие правила применились и откуда они пришли, а Box model — геометрию элемента.

5. Совместимость и поддержка

transition/animation поддержаны везде; новые трубовые и scroll-функции (@supports и проверки производительности) требуют свежих браузеров.

Для современных возможностей придерживайтесь правила «fallback армии»: базовое значение — до, новая функция — после, а @supports для совсем свежих свойств.

6. Распространённые ошибки

forwards сохраняет последний кадр после конца.

Без fill элемент «прыгает» после анимации.

7. Практическое задание

Сделайте плавное открытие модалки.

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

.pop { animation: pop .4s both; }

8. Как применять в проектах

Ровные hover-эффекты на кнопках и карточках, поэтапное появление контента, карусели и скелетоны — стандартные места для анимаций.

Этот приём работает в связке с остальными: раскладку страниц собирают в уроке Flexbox и Grid, цвет и контраст — в Цвет и контраст, типографику — в Веб-типографика.

9. Чек-лист перед сдачей

анимируются только transform/opacity;
длительности 150–300 мс, easing осмысленный;
prefers-reduced-motion учитывается;
не анимируется то, что не должны «дёргаться»;
конечное состояние видно без JS;

Прогоните страницу через аудит производительности и доступности (Lighthouse в DevTools), чтобы поймать типовые промахи до публикации.

10. Как закрепить

Прочитав этот мини-урок, закрепите тему на практике: выполните задание, затем пройдитесь по базовым курсам {rel1t} и {rel2t}, а знания подрядчите на странице Тесты HTML и CSS. Если хотите собрать первый настоящий проект — в уроке Практика: лендинг весь процесс разобран по шагам.

← Вернуться к курсам