CSS Animations、つまりCSSのキーフレームを使ったアニメーションは、document.getAnimations()メソッドで取得できます。結果はAnimationオブジェクトを入れた配列として返されます。
const allAnimationsArray = document.getAnimations();
ただし、getAnimations()が取得できるのは、呼び出されたときに動いているものだけで、CSSで設定されていても実際に動作していないアニメーションは含まれません。
取得したアニメーションは、Animationオブジェクトとして、play()やpause()メソッドなどが使用できます。
動作しているアニメーションが1つだと分かっている場合には、得られた配列の最初の要素として、Animationオブジェクトが参照できます。
// Animationオブジェクトの入った配列を取得
const CSSAnimsList = document.getAnimations();
// Animationオブジェクトの数 CSSAnimsList.length
// 1個しかないので、特定できる
const anim = CSSAnimsList[0];
次の例では、取得した1つのAnimationオブジェクトのプロパティを出力しています。
CSS Animationsの取得(アニメーションが1つの場合)
動作しているアニメーションが2個だと分かっている場合には、配列に含まれる最初とその次の要素として特定できます。次の例では、特定したAnimationオブジェクトからcancel()メソッドを呼び出して一度再生前の状態に戻し、setTimeout()関数を使って、2秒後に再生を開始しています。
const CSSAnimsList = document.getAnimations();
// アニメーションの数は2つなので、それぞれ特定できる。
const anim1 = CSSAnimsList[0];
anim1.cancel();
const anim2 = CSSAnimsList[1];
anim2.cancel();
// 2秒後に再生開始
window.setTimeout(()=>{
anim1.play();
anim2.play();
},2000);
CSS Animationsの取得(アニメーションが2つの場合)
動作しているアニメーションがいくつか分からない場合には、document.getAnimations()で得た配列を、配列のforEach()メソッドなどで処理します。次の例では、Animationオブジェクトのreverse()を使って、3.5秒後に再生の向きを反転しています。
// getAnimations()でアニメーションの配列を取得
const CSSAnims = document.getAnimations();
// 配列のforEace()で不特定数のアニメーションを処理
// 3.5秒ごとにアニメーションを反転
window.setInterval(()=>{
CSSAnims.forEach((anim)=>{
anim.reverse();
});
},3500);
CSS Animationsの取得(アニメーションがいくつか分からない場合)
取得したAnimationオブジェクトは、play()やpause()などのメソッドを使って、再生を制御することができます。次の例では、動作しているアニメーションがいくつか分からない場合、1つのボタンのクリックで、Animationオブジェクトの再生状態(playStateプロパティ)を調べ、再生中なら一時停止し、 一時停止中なら再生する、いわゆるトグル処理を行っています。
[Toggle]ボタンがクリックされたら
toggleButton.addEventListener('click',()=>{
// アニメーションの配列の各要素に対して
CSSAnims.forEach((anim) => {
// 今の再生状態を調べ、再生中なら一時停止し、
// 一時停止中なら再生する
if(anim.playState ==='running'){
anim.pause();
}else if(anim.playState ==='paused'){
anim.play();
}
});
}, false);
CSS Animationsの取得(アニメーションがいくつか分からない場合)
なおこの例では、2つめと3つめのボールのアニメーション開始をCSSのanimation-delayプロパティを使って、少しずつずらしています。
/* 2つめのボール */
.no2{
top:180px;
/* 開始を0.2秒遅らせる */
animation: ball-animation 1s infinite alternate 0.2s;
}
/* 3つめのボール */
.no3{
top:230px;
/* 開始を0.2秒遅らせる */
animation: ball-animation 1s infinite alternate 0.4s;
}
getAnimations()では、CSS Transtionsアニメーションも取得できますが、取得時にアニメーションを動かしておく必要があります。CSS Transtionはそもそも、hoverなど、何らかのきっかけで動作するものなので、上記のようなボタンのクリックによる制御には向いていません。