CSSTransition: transitionProperty プロパティ

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2020年7月.

transitionProperty は CSSTransition インターフェイスのプロパティで、トランジションの 展開されたトランジションプロパティ名 を返します。これは、トランジションが生成された個別指定の CSS プロパティです。

次の例では、ポインターを当てるとボックスの幅が変化するトランジションを実装しています。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);
});