CSSAnimation: animationName プロパティ
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月.
animationName は CSSAnimation インターフェイスのプロパティで、 animation-name を返します。これは、要素に適用されるアニメーションを記述する 1 つ以上の keyframe アットルールを指定します。
値
文字列です。
例
animationName の返却
次の例におけるアニメーションは、slide-in という名前で CSS に定義されています。Element.getAnimations() を呼び出すと、すべての Animation オブジェクトの配列が返されます。animationName プロパティは、アニメーションに与えられた名前を返します。この場合は slide-in です。
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].animationName);
仕様書
| Specification |
|---|
| CSS Animations Level 2 # dom-cssanimation-animationname |