CSSTransition
Baseline
広く利用可能
この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。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]);
});
仕様書
| 仕様書 |
|---|
| CSS Transitions Module Level 2 # the-CSSTransition-interface |