[CSS]classを加えるだけで多彩なアニメーションが簡単に使用できるスタイルシート -Animate.css
Post on:2011年10月17日
フェードイン、フェードアウト、バウンド、シェイク、回転などのアニメーションを簡単に使用できるクロスブラウザ対応のスタイルシートを紹介します。
※JavaScriptは一切使用していません。
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
フラッシュしたり、バウンドしたり、注意を促すアニメーション。
- flash
- bounce
- shake
- tada
Fading entrances
フェードしながら、表示するアニメーション。
- fadeIn
- fadeUp
- fadeInDown
- fadeInLeft
- fadeInRight
- fadeUpBig
- fadeInDownBig
- fadeInLeftBig
- fadeInRightBig
Fading exits
フェードしながら、消えるアニメーション。
- fadeOut
- fadeOutUp
- fadeOutDown
- fadeOutLeft
- fadeOutRight
- fadeOutUpBig
- fadeOutDownBig
- fadeOutLeftBig
- fadeOutRightBig
Bouncing entrances
バウンドしながら、表示するアニメーション
- bounceIn
- bounceInDown
- bounceInUp
- bounceInLeft
- bounceInRight
Bouncing exits
バウンドしながら、消えるアニメーション。
- bounceOut
- bounceOutDown
- bounceOutUp
- bounceOutLeft
- bounceOutRight
Rotating entrances
回転しながら、表示するアニメーション。
- rorateIn
- rorateInDownLeft
- rotateInDownRight
- rotateInUpLeft
- rotateInUpRight
Rotating exits
回転しながら、消えるアニメーション
- rotateOut
- rotateOutDownLeft
- rotateOutDownRight
- rotateOutUpLeft
- rotateOutUpRight
Animate.cssのダウンロード
全てのアニメーションが揃った「animate.css」は、下記よりダウンロードできます。
[ad#ad-2]
また、全部はいらないよ、という人には必要なアニメーションだけでスタイルシートを生成することもできます。
必要なアニメーションのみチェックし、「Build it」をクリックします。
Animate.cssの対応ブラウザ
対応ブラウザはCSS3アニメーションを使用しているため、下記の通りです。
- Safari
- Chrome
- Firefox
- IE10(おそらく)
非サポートブラウザ用には、「Modernizr」を併用してください、とのことです。
sponsors