ITエンジニア/デザイナ向けにオープンソースを毎日紹介

Animate.cssはCSS3を使ったアニメーションライブラリです。様々なイフェクトが用意されています。

Animate.cssはCSS3を使ってアニメーションを実現するライブラリです。何はともあれ、デモ動画を見て何が実現できるのか知ってください。


トップページです。ここの各ボタンを押すとアニメーションが実行されます。


デモ動画です。

Animate.cssの特徴としてはjQueryのようなJavaScriptベースのアニメーションではないと言うことでしょう。利点としてCSS3でサポートされているネイティブな機能を使うことでハードウェアアクセラレーションが活かせるとのことです。なお動作するWebブラウザが限られてしまうという難点はあります。

Animate.cssはCSS3製、MIT Licenseのオープンソース・ソフトウェアです。


MOONGIFTはこう見る

CSSだけでアニメーションを実行するというのは最近のWebデザイナーにおける一つの流行のようで、色々な実装を見かけるようになってきました。HTML5の登場に合わせたCSS3は表現力が格段にあがっているので、知っているか否かで随分やり方が変わってきているようです。

まだまだ手作業で細かく制御するのは工数がかかる状態ではありますが、今後ライブラリ化されていく中で簡単なアニメーションならばCSSだけで実行できるようになっていくでしょう。Webデザイナーとして静的な表現に留まらずトライしていきたい分野になるのではないでしょうか。

via A Bunch of Cool CSS Animations with Animate.CSS | Web Resources | WebAppers

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

daneden/animate.css - GitHub

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2