CSSAnimation

Baseline 已廣泛支援

此特性已經十分成熟，可在許多裝置和瀏覽器版本上使用。自 2020 年 7 月以來，它已在各大瀏覽器中可用。

Web Animations API 的 CSSAnimation 介面代表一個 Animation 物件。

例項屬性

此介面繼承了其父介面 Animation 的屬性。

CSSAnimation.animationName 只讀: 返回動畫名稱的字串。

例項方法

此介面繼承了其父介面 Animation 的方法。

示例

檢查返回的 CSSAnimation

下面示例中的動畫在 CSS 中定義，名稱為 slide-in。呼叫 Element.getAnimations() 會返回所有 Animation 物件的陣列。在本例中，它返回一個 CSSAnimation 物件，表示在 CSS 中建立的動畫。

css

.animate {
  animation: slide-in 0.7s both;
}

@keyframes slide-in {
  0% {
    transform: translateY(-1000px);
  }
  100% {
    transform: translateY(0);
  }
}

let animations = document.querySelector(".animate").getAnimations();
console.log(animations[0]);

規範

規範
CSS Animations Level 2 # the-CSSAnimation-interface

瀏覽器相容性

幫助改進 MDN

瞭解如何貢獻

此頁面由 MDN 貢獻者在 ⁨2023 年 3 月 30 日⁩ 最後修改。

在 GitHub 上檢視此頁面 • 報告此內容的問題