【CSS】 作動中の「animation（アニメーション）」をリスタートする方法

こんにちは、さち です。

CSS の animation で、作動中のアニメーションをリスタート（リセット）したいことがありました。

JavaScript を使ってアニメーションの指定をしている「クラス」を一旦削除し、すぐに追加し直せば良いと思ったんですが、全然上手くいきません……。

ということで、CSS の animation をリセットする方法について書いていきます。備忘録です。

サンプルソース

HTML

<!-- 「play」クラスを削除＆追加するだけ -->
<button id="failure">failure</button>

<!-- requestAnimationFrame を使って削除＆追加 -->
<button id="success">success</button>

<!-- アニメーションする要素 -->
<div id="square" class="play"></div>

CSS

.play {
  animation: moving 1s ease-in-out infinite alternate;
}

JavaScript

const failure_btn = document.querySelector('#failure');
const success_btn = document.querySelector('#success');
const square = document.querySelector('#square');

/* リスタートできない(failure) */
failure_btn.addEventListener('click', ()=> {
  square.classList.remove('play');
  square.classList.add('play');
});

/* リスタートできる(success) */
success_btn.addEventListener('click', ()=> {
  square.classList.remove('play');
  window.requestAnimationFrame( ()=> {
    window.requestAnimationFrame( ()=> {
      square.classList.add('play');
    });
  });
});

クラスを削除した後、追加し直す前に requestAnimationFrame を2回はさむことで、CSSの animation をリスタートできます。

ちなみに、requestAnimationFrame を2回はさむ理由は「Firefox」に対応するためです。「Chrome」「Edge」「Safari」は1回でもリスタートしますが、「Firefox」は2回はさまないとリスタートしません。

結果

「failure」ボタンは、play クラスを削除＆追加するだけです。こちらはリスタートできません。

「success」ボタンは、requestAnimationFrame を使って play クラスを削除＆追加します。こちらはちゃんとリスタートできます。