animate.cssの機能「delay slow fast」

animate.cssに機能が追加されていたので紹介します。

このページのサンプルは、画面に表示されたらアニメーションを実行するように設定しています。

animate.cssの機能「delay slow fast」

animate.cssのクラス[delay slow fast]を設定したサンプルで、それぞれの動作を紹介します。

1. delay

animate.cssのクラスに delay を追加することで、アニメーションの開始するタイミングを変更できます。

<div class="animated bounce">sample_img</div>

default
通常時のアニメーションです。

<div class="animated bounce delay-2s">sample_img</div>

delay-2s
画面に表示されてから２秒後にアニメーションを実行します。

<div class="animated bounce delay-3s">sample_img</div>

delay-3s
画面に表示されてから３秒後にアニメーションを実行します。

<div class="animated bounce delay-4s">sample_img</div>

delay-4s
画面に表示されてから４秒後にアニメーションを実行します。

<div class="animated bounce delay-5s">sample_img</div>

delay-5s
画面に表示されてから５秒後にアニメーションを実行します。

2. slow

animate.cssのクラスに slow を追加することで、アニメーションのスピードを遅くすることができます。

<div class="animated bounceInLeft">sample_img</div>

default
デフォルトの場合、アニメーションの時間は 1s です。

<div class="animated bounceInLeft slow">sample_img</div>

slow
slowを設定すると、アニメーションの時間は 2s となります。

<div class="animated bounceInLeft slower">sample_img</div>

slower
slowerを設定すると、アニメーションの時間は 3s となります。

3. fast

animate.cssのクラスに fast を追加することで、アニメーションのスピードを速くすることができます。

<div class="animated flash">sample_img</div>

default
デフォルトの場合、アニメーションの時間は 1s です。

<div class="animated flash fast">sample_img</div>

fast
fastを設定すると、アニメーションの時間は 0.8s となります。

<div class="animated flash faster">sample_img</div>

faster
fasterを設定すると、アニメーションの時間は 0.5s となります。