Animate.css を使って一定間隔でアニメーションさせる

要素に色々な動きをつけてくれる Animate.css

公式サイト: https://daneden.github.io/animate.css/

やり方はとても簡単で、animate.cssを設置したら、Classに「animated」とつけたい動きの名前を入れれば、さくっと複雑な動きをしてくれます。

例）

<div class="animated flash">点滅させる</div>

これだと、１回きりなので、ずっと動かしたいときは、「infinite」をつけます。

例）

<div class="animated flash infinite">ずっと点滅させる</div>

とはいえ、これだとずーーーーと点滅していて目がチカチカする！
他の動きもそうですが、一回動いたらしばらく止まって、で、また動いて欲しい！
ということもあるはず、

で、いろいろ調べた結果、やっぱりそこはJavascriptで制御しないといけないようなので、
サンプル書いてみました。

簡単にいうと、Javascriptで、一定間隔でClassを取ったりつけたりするだけです。

setInterval("goFlash()",4000);

function goFlash() {
    $('#target').addClass('animated flash');
    setTimeout("removeFlash()",2000);
}

function removeFlash() {
    $('#target').removeClass('animated flash');
}

setInterval() を使って、一定の間隔でClassを追加
Classを追加後、そのあとすぐ消すとアニメーションしてくれないので、setTimeout()を使って、少し経過したらClassを取るという動作です。

これで、アニメーションが、動いたあとしばらく動かず、また動くという動作ができます。