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

フェードイン、フェードアウト、バウンド、シェイク、回転などのアニメーションを簡単に使用できるクロスブラウザ対応のスタイルシートを紹介します。
※JavaScriptは一切使用していません。

サイトのキャプチャ

Animate.css - a bunch of plug-and-play CSS animations

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」カスタムビルド

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

Animate.cssの対応ブラウザ

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

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

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

top of page

©2017 coliss