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;
	}
);