Что означает термин#
В CSS правило @keyframes описывает такие состояния, а свойства animation управляют проигрыванием. Между указанными точками браузер вычисляет промежуточные значения поддерживаемых свойств. Это позволяет задать движение сложнее простого перехода между двумя состояниями.
Практический пример#
Для подписи заданы начало с opacity: 0 и окончание с opacity: 1. После подключения имени анимации текст проявляется. Само объявление @keyframes ничего не запускает, пока оно не связано с элементом. Видимый текст должен оставаться доступным при отказе сценария.
Как проверить#
Проверьте начало, окончание, повторение и прерывание анимации. Включите prefers-reduced-motion и убедитесь, что информация остаётся читаемой. Измеряйте сложные эффекты на слабом устройстве: наличие ключевых кадров не гарантирует плавность, особенно при анимации геометрии, тяжёлых теней или большого количества элементов.
Источники#
Проверены 23 октября 2026 г.. Официальные рекомендации отделены от наших примеров и результатов проверки.