API анимаций веб-страниц

API анимаций веб-страниц позволяет синхронизировать и задавать временные изменения отображения веб-страницы, т.е. анимировать элементы DOM. Это достигается с помощью двух моделей: модели времени и модели анимации.

API анимаций веб-страниц предоставляет общий язык для браузеров и разработчиков для описания анимаций элементов DOM. Для получения дополнительной информации о концепциях API и его использовании, прочтите Использование API анимаций веб-страниц.

Animation

Предоставляет средства управления воспроизведением и временную шкалу для узла или источника анимации. Может принимать объект, созданный с помощью конструктора KeyframeEffect().

KeyframeEffect

Описывает наборы анимируемых свойств и значений, называемых ключевыми кадрами и их временные параметры. Затем их можно воспроизводить с помощью конструктора Animation().

AnimationTimeline

Представляет временную шкалу анимации. Этот интерфейс существует для определения функций временной шкалы (унаследованных от DocumentTimeline и будущих объектов временной шкалы) и не используется разработчиками напрямую.

AnimationEvent

Часть модуля CSS анимаций, захватывающая имя анимации и прошедшее время.

DocumentTimeline

Представляет временные шкалы анимаций, включая стандартную временную шкалу документа (доступ к которой осуществляется через свойство Document.timeline).

API анимаций веб-страниц добавляет возможности к document и element.

document.timeline

Объект DocumentTimeline, представляющий стандартную временную шкалу документа.

document.getAnimations()

Возвращает массив объектов Animation, которые в данный момент активны на элементах в document.

Element.animate()

Короткая функция для создания и воспроизведения анимации на элементе. Она возвращает созданный экземпляр объекта Animation.

Element.getAnimations()

Возвращает массив объектов Animation, которые в данный момент влияют на элемент или запланированы на будущее.

• Свойство CSS animation (сокращенная запись)
• Свойство CSS animation-timeline
• Использование API анимаций веб-страниц
• Использование CSS анимаций
• Модуль CSS анимаций
• Модуль CSS анимаций, управляемых прокруткой