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 上查看此页面 • 报告此内容的问题