[CSS]classを加えるだけで多彩なアニメーションが簡単に使用できるスタイルシート -Animate.css

フェードイン、フェードアウト、バウンド、シェイク、回転などのアニメーションを簡単に使用できるクロスブラウザ対応のスタイルシートを紹介します。
※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」は、下記よりダウンロードできます。

• animate.css -GitHub

[ad#ad-2]

また、全部はいらないよ、という人には必要なアニメーションだけでスタイルシートを生成することもできます。

「animate.css」カスタムビルド

必要なアニメーションのみチェックし、「Build it」をクリックします。

Animate.cssの対応ブラウザ

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

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

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