【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>

JavaScript

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

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

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

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

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

結果

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

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