この記事は、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();

});

もっと簡単な方法はありますか?

こういう投稿をすると、大抵いろんな方がもっと簡単な方法を提案してくださることが多いので、今回もそういう提案があるとよいのですが・・・。