CSSAnimation
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月.
CSSAnimation はウェブアニメーション API のインターフェイスで、Animation オブジェクトを表します。
インスタンスプロパティ
このインターフェイスには、親である Animation から継承したプロパティがあります。
CSSAnimation.animationName読取専用-
アニメーション名を文字列で返します。
インスタンスメソッド
このインターフェイスには、親である Animation から継承したメソッドがあります。
例
返された CSSAnimation の検査
次の例におけるアニメーションは、slide-in という名前で CSS に定義されています。Element.getAnimations() を呼び出すと、すべての Animation オブジェクトの配列が返されます。この場合、CSS で生成されたアニメーションを表す CSSAnimation オブジェクトが返されます。
css
.animate {
animation: slide-in 0.7s both;
}
@keyframes slide-in {
0% {
transform: translateY(-1000px);
}
100% {
transform: translateY(0);
}
}
js
let animations = document.querySelector(".animate").getAnimations();
console.log(animations[0]);
仕様書
| Specification |
|---|
| CSS Animations Level 2 # the-CSSAnimation-interface |