CSSTransition：transitionProperty 属性

Baseline 已广泛支持

此特性已经十分成熟，可在许多设备和浏览器版本上使用。自 2020 年 7 月以来，它已在各大浏览器中可用。

CSSTransition 接口的 transitionProperty 属性返回过渡的展开过渡属性名称。这是生成过渡所对应的 CSS 长属性（longhand property）。

值

字符串。

示例

返回 transitionProperty

下面示例中的过渡会在鼠标悬停时改变框的宽度。调用 Element.getAnimations() 会返回所有 Animation 对象的数组。在我们的例子中，这会返回一个表示所创建动画的 CSSTransition 对象。transitionProperty 属性返回创建过渡所针对的属性，即 width。

css

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

.box:hover {
  width: 200px;
}

const item = document.querySelector(".box");
item.addEventListener("transitionrun", () => {
  let animations = document.querySelector(".box").getAnimations();
  console.log(animations[0].propertyName);
});

规范

规范
CSS Transitions Level 2 # dom-csstransition-transitionproperty

浏览器兼容性

帮助改进 MDN

了解如何贡献

此页面最后修改于 ⁨2025年8月8日⁩，由 MDN 贡献者。

在 GitHub 上查看此页面 • 报告此内容的问题