CSS3でアニメーションが追加されたとは言え、効果的に実装するのは色々面倒です。そのため、分かってはいつつもなかなか手出しできないという人は多いのでは内でしょうか。 そんな方に使ってみて欲しいのがlupです。jQuery風に簡単な指定を使ってアニメーションできるJavaScriptライブラリです。

lupの使い方

一例です。色が刻々と変わっているのが分かるでしょうか。

実際の指定です。addを使って色を指定し、waitを使って一定時間そのまま停止します。そしてthen()を使って実行し、最後にend()を実行すると停止します。

lup("#test").add('green').wait(2000).remove().add('red').wait(2000).then().end();

アニメーションとしては色が変わる程度ですが、簡単な指定でできるようになっています。Web Fontのアイコンの色をイベントによって変更したり、DOMを警告時にフラッシュさせたりするのに使えるのではないでしょうか。

lupはJavaScript/CSS3製のオープンソース・ソフトウェア(MIT License)です。

usablica/lup: Easy to use CSS3 transition manager