CSSAnimation：animationName 屬性

Baseline 已廣泛支援

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

animationName 屬性是 CSSAnimation 介面的一部分，它返回 animation-name。這指定了一個或多個關鍵幀規則，這些規則描述了應用於元素的動畫。

值

字串。

示例

返回 animationName

下面示例中的動畫在 CSS 中定義，名稱為 slide-in。呼叫 Element.getAnimations() 返回一個包含所有 Animation 物件的陣列。animationName 屬性返回賦予動畫的名稱，在本例中為 slide-in。

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].animationName);

規範

規範
CSS Animations Level 2 # dom-cssanimation-animationname

瀏覽器相容性

幫助改進 MDN

瞭解如何貢獻

此頁面最後更新於 ⁨2023 年 4 月 7 日⁩，由 MDN 貢獻者修改。

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