CSSTransition
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月.
CSSTransition はウェブアニメーション API のインターフェイスで、CSS トランジションで使用される Animation オブジェクトです。
インスタンスプロパティ
このインターフェイスには、親である Animation から継承したプロパティがあります。
CSSTransition.transitionProperty読取専用-
トランジションする CSS プロパティ名を文字列として返します。
インスタンスメソッド
このインターフェイスには、親である Animation から継承したメソッドがあります。
固有のメソッドはありません。
例
返された CSSTransition の検査
次の例では、ホバー時にボックスの幅が変化するトランジションを実装しています。Element.getAnimations() を呼び出すと、すべての Animation オブジェクトの配列が返されます。この場合、生成されるアニメーションを表す CSSTransition オブジェクトが返されます。
css
.box {
background-color: #165baa;
color: white;
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]);
});
仕様書
| Specification |
|---|
| CSS Transitions Level 2 # the-CSSTransition-interface |