サイト内検索:

CSSでjQueryでできるようなアニメーションを実現する「Animate.css」

animate.css is a bunch of cool, fun, and cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and general just-add-water-awesomeness.

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

jQueryでもできるんだけど同じようなアニメーション効果をCSSだけで実現するものです。CSS定義なので適用したいエレメントにクラスを割り当ててあげるだけで使えるようになるというのがお手軽です。

でも、なんでjQuery使えばできるのにあえてCSSでやるのか、というと、それが「Why not use jQuery?」というところに書かれていました。

CSS animations are pretty frickin' awesome - they use hardware acceleration natively, unlike JavaScript-powered animations.

ということで、CSSアニメーションであればGPU使えるから、という理由からのようです。

ただし、IEとかブラウザによってはバージョン違いでハードウェアアクセラレーションがサポートされていない場合もあるわけで、その場合はModernizr使って同じ効果をjQueryにやらせる、なんて配慮もしています。(Modernizrを使ったデモ

田中さんの役に立つと良いな、と思って取り上げてみました。

blog comments powered by Disqus

2011年アルファブロガー受賞

新着DVD

モバイル

Powered by Movable Type 6.1.2

ブログ内検索

BlogPeople ReviewMe!

このサイトのレビューとか応援コメントを書いてもらえると励みになります。

Affi☆List for Amazon

バナー広告

このブログ記事について

このページは、nagasawaが2011年10月21日 20:39に書いたブログ記事です。

ひとつ前のブログ記事は「2Dゲームで使う画像素材の作成方法」です。

次のブログ記事は「AKB"ナース姿"にファン大興奮!「シールブック」が大人気」です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。