今日紹介する[Animate.css]は、アニメーションさせたい要素に任意のクラス名を追加するだけで、合計66種類のエフェクト効果を導入することができる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 のエンジニアの方のようです。素晴らしいですね!