Animate.css がとても簡単に使える上に良いので、備忘録としてメモ。
CSS3、すごいですよね。box-shadowとか、グラデーション関連とか、アニメーションなどなんかphotoshopみたいになってる気がします。
- 使い方
非常に簡単です。適用したいタグにクラスを2つ追加するだけ。
>|html|
<div class="animated bounce">
つよい
</div>
||<
これだけでokです。
入れ方としては
>|html|
<div class="animated(必須) アニメーション名(詳しくはanimate.css)">
</div>
||<
でOKです。クラスは大文字と小文字が区別されるので、bounceInUpのIとかUとかは気を付けた方が良いでしょう。
なお、このアニメーションはページを開いたときにすぐ実行されるので、内容量が多くて下のほうにもアニメーションがあったとしても、開いたときに実行されます。そういうときはwow.jsを使いましょう。
あと、hoverしたときにアニメーションをさせたいと思う人も居ると思います。ほかにも、delayを追加したいなど。そんなときにはSASS(scss)を使えば解決できます。scss記法については次の記事で書きます。
とりあえずかなり優秀なフレームワークです。jsを使わなくて良いところは大きいでしょう。ホームページのコンテンツにちょっとアクセントを付けたいときなどに使うと良いでしょう。