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();
});

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

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

Facebook
Google+
Twitter
LinkedIn
Pinterest

ご相談ください

弊社では、案件のサイズに関係なくコストパフォーマンスの高いウェブ制作サービスを提供しております。

気軽にご相談ください。

Email: info@winandcompany.net

Wordpress、Laravel、React Natvieを得意としたウェブシステム開発会を行っております。社多言語対応も可!
気軽にお問合せください。

About

Downloads

© All rights reserved

Made with ❤ in San Francisco Bay Area, California