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