やりたいこと

JavaScriptを使って、設定したCSSアニメーションをもう一度リスタートさせたい。

やり方

run-animation というクラスをつけ直してる。

const element = document.getElementById("logo");

element.addEventListener("click", function(e) {
  e.preventDefault;

  element.classList.remove("run-animation");
  void element.offsetWidth;
  element.classList.add("run-animation");
}, false);

Demo

実際のデモを見てみよう。

Fancy Text (click to restart) をクリックするとアニメーションがリスタートされます。

See the Pen Restarting a CSS Animation by Chris Coyier (@chriscoyier) on CodePen.

参考