このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。
CSSAnimation: animationName プロパティ
Baseline
広く利用可能
この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。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);
仕様書
| 仕様書 |
|---|
| CSS Animations Level 2 # dom-cssanimation-animationname |
ブラウザーの互換性
ブラウザー互換性一覧表を表示するには、JavaScript を有効にしてください。