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