Анимации CSS с ключевыми кадрами в React

Правило @keyframes описывает многоэтапную анимацию, задавая значения свойств в точках временной шкалы с помощью from/to или процентов, например 0%, 50%, 100%.

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

Набор ключевых кадров применяется с помощью свойства animation: animation: slideIn 400ms ease forwards. В нём объединены имя, длительность, функция времени и режим заполнения.

Режим заполнения forwards сохраняет для элемента значения последнего ключевого кадра после завершения анимации, предотвращая возврат к начальному состоянию.

В React обычно добавляют класс, содержащий объявление animation, когда состояние становится истинным. Например, добавление класса is-entering запускает ключевые кадры в момент монтирования элемента или переключения флага.

Так логика анимации остаётся в CSS, а React лишь определяет, когда присоединить класс.

animation-fill-mode определяет, какие стили применяются до и после выполнения анимации. forwards сохраняет последний ключевой кадр, backwards применяет первый ключевой кадр во время задержки, а both делает и то, и другое.

Без forwards элемент, анимируемый до состояния плавного появления, после завершения анимации снова стал бы невидимым.

animation-direction: alternate воспроизводит анимацию вперёд, а затем назад при каждой итерации. В сочетании с animation-iteration-count: infinite это создаёт плавное движение туда-обратно, напоминающее пульсацию или дыхание.

Такой эффект удобен для индикаторов загрузки или ненавязчивого привлечения внимания движением.

animation-play-state может иметь значение running или paused. Управлять им можно из состояния React: например, при наведении курсора поставить бегущую строку на паузу, сменив класс.

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

Кадровая анимация воспроизводится только один раз, когда её класс применяют впервые; повторное добавление того же класса не запускает её заново. Самый простой приём в React — изменить значение key, чтобы React смонтировал новый узел и воспроизвёл анимацию с начала.

Например, key={count} у уведомления повторно монтирует его при каждом увеличении count.

Некоторые пользователи включают уменьшение движения в своей OS для комфорта или доступности. Оберните необязательные анимации в @media (prefers-reduced-motion: reduce) и отключите или сократите их внутри этого блока.

Учет этой настройки делает интерфейс более инклюзивным и помогает избежать дискомфорта.

Чтобы анимировать элементы при их появлении в области просмотра, используйте IntersectionObserver в useEffect. Когда наблюдаемый элемент становится видимым, установите состояние — это добавит класс анимации.

Так можно создавать эффекты появления при прокрутке без ресурсоёмких обработчиков прокрутки, работающих на каждом кадре.

animation-delay задаёт задержку начала каждой кадровой анимации, создавая между ними интервалы. Если для списка элементов задать постепенно увеличивающиеся задержки, они будут анимироваться последовательно, создавая срежиссированный эффект появления.

В React задержку для каждого элемента можно вычислить с помощью style={{ animationDelay: i * 80 + 'ms' }}.

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

И то и другое реализуется средствами CSS, поэтому React лишь определяет, когда добавлять классы, а браузер обрабатывает кадры.

Проверьте, насколько хорошо Вы понимаете поведение кадровых анимаций.

Вы научились определять @keyframes, применять их с помощью сокращённой записи animation, управлять режимом заполнения и направлением, приостанавливать и повторно запускать анимации, а также показывать элементы при прокрутке с помощью IntersectionObserver.

Вы также узнали, как учитывать настройку prefers-reduced-motion для создания доступной анимации.