JavaScript | ドキュメント内にある全てのアニメーションを取得する
JavaScriptでドキュメント内に設定されている全てのDOMアニメーションを取得する方法を紹介しています。
すべてのアニメーションを取得
getAnimations()メゾッドを利用してページ内にある全てのDOMアニメーションを取得する動作サンプルとJavaScriptのサンプルコードです。
getAnimations()メゾッドはJavaScriptのanimate()メゾッドで作成されたアニメーション、CSSの「animation」プロパティで設定しているアニメーションも取得します。
CSSの「transition」プロパティで指定しているアニメーション、Canvas内で設定されているアニメーションは取得しません。
See the Pen JavaScript | Reset animation with animate by yochans (@yochans) on CodePen.
HTMLにはJavaScriptのanimate()メゾッド、CSSの「animation」プロパティ、CSSの「transition」プロパティと各アニメーションさせたい要素としてdivタグで「.item」とそれぞれのclass名で設置、CSSでは各プロパティを指定、JavaScriptのanimate()メゾッドで同様のアニメーションを指定しています。
<p>JavaScript animate()</p>
<div class="item javascript-animate"></div>
<p>css animation</p>
<div class="item css-animation"></div>
<p>css transition (do not get animation?)</p>
<div class="item css-transition"></div>ドキュメント内に設定されている全てのDOMアニメーションを取得するにはdocument.getAnimations()メゾッドを利用する事が可能です。
サンプルでは取得したアニメーションの情報をコンソールに出力、アニメーションの速度を変更しています。
当サンプルではCSSの「transition」プロパティで設定したアニメーションは取得できてません。
document.getAnimations().forEach(
function (animation) {
console.log(animation);
animation.playbackRate *= 3;
}
);