カテゴリー: study

初めてのAnimate.css

1.　animate.css本体をダウンロードしてきて、HTMLに読み込ませる。

<link rel=”stylesheet” href=”<?php echo get_template_directory_uri(); ?>/animate.css” />

ダウンロードサイト

github　→http://daneden.github.io/animate.css/

→https://github.com/daneden/animate.css

2.　読み込ませたら、アニメーションを追加したい要素に対してクラス「.animated .アニメーション名」を追加する。

<p class=”animated swing“>ゆらゆらと揺れますよ！</p>

ゆらゆらと揺れますよ！

.animatedを忘れると絶対動かないので注意！！

 

参考サイト

  1. 豊富なCSSアニメーションを簡単に実装することができる「Animate.css」を使ってみよう
  2. 『Animate.css』の使い方
  3. [CSS]classを加えるだけで多彩なアニメーションが簡単に使用できるスタイルシート -Animate.css

2.は<p class=”swing“>となっているのでうごかなかった。

3は流石に詳しく書いてあるけどね。

 

複数の要素に対して同じAnimate.cssを適用するなら

$(‘#yourElement’).addClass(‘animated bounceOutLeft’);

が必要。

参考サイト

  • http://blog.suzaka.jp/mottomachi/2014/02/20/p25852

配布サイトにも詳しくかいてあるけどね。英語だけど。

 

■対応ブラウザ

対応ブラウザはCSS3アニメーションを使用しているため、下記の通りです。

  • Safari
  • Chrome
  • Firefox
  • IE10(おそらく)

非サポートブラウザ用には、「Modernizr」を併用してください、とのことです。

『コリス』より引用