キーフレームを使ったCSSアニメーションを実現「jQuery keyframe」
jQuery keyframeはCSSのスタイルの中で%を使ってアニメーションをキーフレーム単位で設定できるjQueryライブラリです。
CSS3のパワーアップによってCSSだけで絵を描いたり、アニメーションしたりする試みが増えています。今回はその一つ、JavaScriptと組み合わせることでさらにキーフレームを使ったアニメーションを実現するjQuery keyframeを紹介します。
最初の表示です。ボックスをクリックします。
動き出しました。動きは一定ではなく、ペースを変えながら滑っていきます。
設定方法です。入れ子に設定しています。
jQuery keyframeではスタイルの指定の中でパーセントを指定してそれをキーフレームとしてスタイル指定を行います。leftやbackground、colorなどが利用できます。後はjQuery keyframeが自動的にその間の動きを補完してくれるという仕組みです。
jQuery keyframeはjQuery/JavaScript製のソフトウェア（ソースコードは公開されていますがライセンスは明記されていません）です。
MOONGIFTはこう見る
jQuery UIにはアニメーションが組み込まれています（slideUpやFadeInなど）が、jQuery keyframeはさらにそれを複数段階にわたって自動で補完していくライブラリと言えます。アイディア次第で色々な場面で使えるでしょう。マウスオーバー時の色変化を多段階で行うと言った際にも使えるはずです。
元々そうした変化はFlashで行うのが一般的でしたが、今後はJavaScriptだけで実現できるようになるでしょう。JavaScriptであればカスタマイズも容易ですし、変化が終わった際のコールバックなどシステム連携も実現しやすくなります。動くアニメーション以外にもどのような場面で使えそうか考えてみましょう。