Blue Point Solutions

CSS アニメーションの再スタート

この記事は、http://css-tricks.com/ の Chris Coyier の許可を得て、翻訳しています。一部変更して翻訳している部分もある場合がります。オリジナルの記事はここよりご覧いただけます。

CSSアニメーション（ala @-webkit-keyframes）の再スタートは、想像するほど簡単ではありません。ではまず、CSSアニメーションを一度だけ実行すると設定したとしましょう：

.run-animation {
   -webkit-animation: my-fancy-animation 5s once;
}

ロゴ部分にクラス指定して実行したとします：

<h1 id="logo" class="run-animation">
    Fancy Logo
</h1>

その後、何らかの理由・・・例えばクリックに伴い・・・など、アニメーションを再度実行させたいと仮定します。きっとみなさんCSSで再実行する方法があると予想するかと思いますが、私が思いつく限りそのような方法は残念ながら見当たりません。JavaScript（jQuery）でクラス名を一度削除させて、再追加させてみたりするかもしれませんね：

$("#logo").click(function() {
      // not gonna work
      $(this).removeClass("run-animation").addClass("run-animation");
});

本当にしなければならないことは、要素をそのページから一度完全に削除して、改めてインサートすることです。jQueryを使った簡単なデモとしては、クローンを作成して、オリジナルのすぐ後ろにクローンをインサートし、その後オリジナルを削除する方法があります。

$("#logo").click(function() {
          var el     = $(this),
              newone = el.clone(true);
          el.before(newone);
          $("." + el.attr("class") + ":last").remove();
});