📝

CSS animation を再実行させたい時は requestAnimationFrame してやる

2020/09/22に公開

function play() {
  const element = document.getElementById('hoge');
  element.className = "";
  window.requestAnimationFrame(function(time) {
    window.requestAnimationFrame(function(time) {
      element.className = "play_animation";
    });
  });
}

こういう感じで class を付け直してやると
css animation が再実行できる。

参考

上記はこのMDNに書かれているやり方
- 再度アニメーションを実行する - CSS アニメーションのヒントとコツ - MDN
そのほかのやり方
- CSSアニメーションのリスタート方法 - Ariafloat Blog
- css のアニメーションを好きなタイミングで実行させる - NER
- display: block; と display: none; を使うやり方やDOMごと消すやり方はDOMの配置が変わってしまうので最新のスマホなどだとパフォーマンス良すぎてチラつきが出てしまうのが悩みどころ

参考

Discussion