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 上檢視此頁面 • 報告此內容的問題