【CSS3】約60種類のエフェクトが使えるCSSライブラリ[Animate.css]が神懸かっている理由。

Ads by Google

今日紹介する[Animate.css]は、アニメーションさせたい要素に任意のクラス名を追加するだけで、合計66種類のエフェクト効果を導入することができるCSSライブラリです。

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

このライブラリの優れている点は、すべてのアニメーションのクオリティが高く、申し分のない完成度であることと、誰でも簡単に利用でき、汎用性に優れていることです。
「神は細部に宿る」という諺がありますが、[Animate.css]の1つ1つの動きの美しさを見れば、「神懸かっている」という評価も理解していただけるのではないでしょうか。

用意されているアニメーションは以下。

Attention Seekers
bounce
flash
pulse
rubberBand
shake
swing
tada
wobble
Bouncing Entrances
bounceIn
bounceInDown
bounceInLeft
bounceInRight
bounceInUp
Bouncing Exits
bounceOut
bounceOutDown
bounceOutLeft
bounceOutRight
bounceOutUp
Fading Entrances
fadeIn
fadeInDown
fadeInDownBig
fadeInLeft
fadeInLeftBig
fadeInRight
fadeInRightBig
fadeInUp
fadeInUpBig
Fading Exits
fadeOut
fadeOutDown
fadeOutDownBig
fadeOutLeft
fadeOutLeftBig
fadeOutRight
fadeOutRightBig
fadeOutUp
fadeOutUpBig
Flippers
flip
flipInX
flipInY
flipOutX
flipOutY
Lightspeed
lightSpeedIn
lightSpeedOut
Rotating Entrances
rotateIn
rotateInDownLeft
rotateInDownRight
rotateInUpLeft
rotateInUpRight
Rotating Exits
rotateOut
rotateOutDownLeft
rotateOutDownRight
rotateOutUpLeft
rotateOutUpRight
Specials
hinge
rollIn
rollOut
Zoom Entrances
zoomIn
zoomInDown
zoomInLeft
zoomInRight
zoomInUp
Zoom Exits
zoomOut
zoomOutDown
zoomOutLeft
zoomOutRight
zoomOutUp

合計66種類!
圧倒的です!
ライブラリのダウンロードは以下より。

すべてのアニメーションは CSS3 の[@keyframes]で制御されているので、わずかな知識でもカスタマイズが可能です。
なお、製作者は dropbox のエンジニアの方のようです。素晴らしいですね!

こちらの記事もいかがですか?

アナタにオススメ!
同じカテゴリーの他の記事です。

Ads by Google