CSSTransition

CSSTransition 是 Web 动画 API 的一个接口，它表示用于 CSS 过渡 的 Animation 对象。

EventTarget Animation CSSTransition

实例属性

此接口继承其父级 Animation 的属性。

CSSTransition.transitionProperty 只读

返回过渡 CSS 属性名称（字符串）。

实例方法

此接口继承其父级 Animation 的方法。

没有特定方法。

示例

检查返回的 CSSTransition

以下示例中的过渡在悬停时更改框的宽度。调用 Element.getAnimations() 会返回所有 Animation 对象的数组。在本例中，它返回一个 CSSTransition 对象，表示创建的动画。

css
.box {
  background-color: #165baa;
  color: #fff;
  width: 100px;
  height: 100px;
  transition: width 4s;
}

.box:hover {
  width: 200px;
}
js
const item = document.querySelector(".box");
item.addEventListener("transitionrun", () => {
  let animations = document.querySelector(".box").getAnimations();
  console.log(animations[0]);
});

规范

规范
CSS Transitions Level 2
# the-CSSTransition-interface

浏览器兼容性

BCD 表格仅在浏览器中加载