Анимации CSS

Модуль CSS анимаций позволяет анимировать значения свойств CSS, таких как background-position и transform, со временем, используя ключевые кадры. Каждый ключевой кадр описывает, как анимируемый элемент должен отображаться в заданный момент во время последовательности анимации. Вы можете использовать свойства в модуле анимаций для управления продолжительностью, количеством повторений, задержкой начала и другими аспектами анимации.

Анимации в действии

Чтобы увидеть анимацию в поле ниже, нажмите на флажок «Запустить анимацию» или поместите курсор над полем. Когда анимация активна, облако вверху изменяет форму, снежинки падают, а уровень снега внизу поднимается. Чтобы приостановить анимацию, снимите флажок или удалите курсор из поля.

Эта примерная анимация использует animation-iteration-count для многократного падения хлопьев, animation-direction для перемещения облака вперёд-назад, animation-fill-mode для подъёма уровня снега в ответ на движение облака и animation-play-state для паузы анимации.

Нажмите «Запустить» в примере выше, чтобы увидеть или изменить код анимации в MDN Playground.

Справочник

Свойства

Правила @

@keyframes

События

Все анимации, даже те, у которых продолжительность 0 секунд, генерируют события анимации.

Интерфейсы

Руководства

Использование анимаций CSS: Пошаговое руководство по созданию анимаций с помощью CSS. В этой статье описываются свойства CSS, относящиеся к анимации, и правила @, а также то, как они взаимодействуют друг с другом.
Использование API анимаций веб-страниц: Общие требования к анимации, которые можно решить несколькими строками JavaScript.

Связанные понятия

will-change свойство CSS
<easing-function> тип данных
prefers-reduced-motion медиа-запрос
Кривая Безье термин из глоссария

Спецификации

Спецификация
CSS Анимации Уровень 2
CSS Анимации Уровень 1

См. также

Анимации, управляемые прокруткой CSS
Свойства в модуле CSS переходов для запуска анимаций на основе действий пользователя
Свойство interpolate-size и функция calc-size() для включения анимаций к и от внутренних значений размеров.
Элемент HTML <canvas> вместе с API холста и WebGL API для рисования графики и анимаций
Интерфейс SVGAnimationElement для всех интерфейсов элементов, связанных с анимацией, включая SVGAnimateElement, SVGSetElement, SVGAnimateColorElement, SVGAnimateMotionElement и SVGAnimateTransformElement

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animations