Web Animations API

概念與用法

Web Animations API 為瀏覽器和開發者提供了一種通用語言來描述 DOM 元素的動畫。要獲取有關 API 概念以及如何使用的更多資訊，請閱讀 使用 Web Animations API。

Web Animations 介面

Animation

為動畫節點或源提供播放控制元件和時間軸。可以接受使用 KeyframeEffect() 建構函式建立的物件。

KeyframeEffect

描述一組可設定動畫的屬性和值，稱為關鍵幀及其時序選項。然後可以使用 Animation() 建構函式來播放這些關鍵幀。

AnimationTimeline

表示動畫的時間軸。此介面用於定義時間軸功能（由 DocumentTimeline 和未來的時間軸物件繼承），並且開發者本身不直接訪問它。

AnimationEvent

CSS Animations 模組的一部分，用於捕獲動畫名稱和已用時間。

DocumentTimeline

表示動畫時間軸，包括預設的文件時間軸（可透過 Document.timeline 屬性訪問）。

其他介面的擴充套件

Web Animations API 為 document 和 element 添加了功能。

Document 介面的擴充套件

document.timeline

表示預設文件時間軸的 DocumentTimeline 物件。

document.getAnimations()

返回一個 Array，其中包含當前在 document 的元素上生效的 Animation 物件。

Element 介面的擴充套件

Element.animate()

一個快捷方法，用於在元素上建立和播放動畫。它返回建立的 Animation 物件例項。

Element.getAnimations()

返回一個 Array，其中包含當前影響元素或計劃在未來影響元素的 Animation 物件。

規範

另見

• CSS animation 簡寫屬性
• CSS animation-timeline 屬性
• 使用 Web 動畫 API
• 使用 CSS 動畫
• CSS 動畫模組
• CSS 滾動驅動動畫模組