[CSS]classを加えるだけで多彩なアニメーションが簡単に使用できるスタイルシート -Animate.css
Post on:2011年10月17日
フェードイン、フェードアウト、バウンド、シェイク、回転などのアニメーションを簡単に使用できるクロスブラウザ対応のスタイルシートを紹介します。
※JavaScriptは一切使用していません。
![サイトのキャプチャ](/wp-content/uploads-2011-2d/2011101706.png)
Animate.css - a bunch of plug-and-play CSS animations
[ad#ad-2]
Animate.cssの使い方
「animate.css」を外部ファイルとして指定し、アニメーションを加えたいエレメントにclassを付与するだけです。
外部ファイル
<link rel="stylesheet" href="animate.css" />
エレメントにclassを付与
<p class="flash">Live long and prosper.</p>
Animate.cssの実装
デモでは、classを付与するだけで、多彩なアニメーションが簡単に利用できます。
各リストは利用できるclassです。
Attention seekers
フラッシュしたり、バウンドしたり、注意を促すアニメーション。
![デモのイメージ](/wp-content/uploads-2011-2d/2011101707-01.png)
- flash
- bounce
- shake
- tada
Fading entrances
フェードしながら、表示するアニメーション。
![デモのイメージ](/wp-content/uploads-2011-2d/2011101707-02.png)
- fadeIn
- fadeUp
- fadeInDown
- fadeInLeft
- fadeInRight
- fadeUpBig
- fadeInDownBig
- fadeInLeftBig
- fadeInRightBig
Fading exits
フェードしながら、消えるアニメーション。
![デモのイメージ](/wp-content/uploads-2011-2d/2011101707-03.png)
- fadeOut
- fadeOutUp
- fadeOutDown
- fadeOutLeft
- fadeOutRight
- fadeOutUpBig
- fadeOutDownBig
- fadeOutLeftBig
- fadeOutRightBig
Bouncing entrances
バウンドしながら、表示するアニメーション
![デモのイメージ](/wp-content/uploads-2011-2d/2011101707-04.png)
- bounceIn
- bounceInDown
- bounceInUp
- bounceInLeft
- bounceInRight
Bouncing exits
バウンドしながら、消えるアニメーション。
![デモのイメージ](/wp-content/uploads-2011-2d/2011101707-05.png)
- bounceOut
- bounceOutDown
- bounceOutUp
- bounceOutLeft
- bounceOutRight
Rotating entrances
回転しながら、表示するアニメーション。
![デモのイメージ](/wp-content/uploads-2011-2d/2011101707-06.png)
- rorateIn
- rorateInDownLeft
- rotateInDownRight
- rotateInUpLeft
- rotateInUpRight
Rotating exits
回転しながら、消えるアニメーション
![デモのイメージ](/wp-content/uploads-2011-2d/2011101707-07.png)
- rotateOut
- rotateOutDownLeft
- rotateOutDownRight
- rotateOutUpLeft
- rotateOutUpRight
Animate.cssのダウンロード
全てのアニメーションが揃った「animate.css」は、下記よりダウンロードできます。
[ad#ad-2]
また、全部はいらないよ、という人には必要なアニメーションだけでスタイルシートを生成することもできます。
![サイトのキャプチャ](/wp-content/uploads-2011-2d/2011101708.png)
必要なアニメーションのみチェックし、「Build it」をクリックします。
Animate.cssの対応ブラウザ
対応ブラウザはCSS3アニメーションを使用しているため、下記の通りです。
- Safari
- Chrome
- Firefox
- IE10(おそらく)
非サポートブラウザ用には、「Modernizr」を併用してください、とのことです。
sponsors