JPEGを用いたアニメーション

File機能は一旦やめてJPEGを用いたアニメーションを試しています。

アニメGIFのようなパラパラアニメで、複数のページを参考に試していますが、いずれも全フレームの画像を横(縦)に並べた巨大なJPEGを用意してそれをJavascriptやCSSを利用してアニメーションさせる方法をとっています。
動かすまでは割りとあっさり成功しました。

参考にしたのは以下のページ。
CSS SpritesとCSSアニメーションでコマアニメを作る
アニメーションgifならぬアニメーションjpg/png
AfterEffectsを使ったiPhone用アニメーションjpegの作り方

１つめはCSS、２、３個目はJavascriptで実現しているみたいです。3は試しておらず。
Cordovaにはまだ落としこんでおらず、mobileSafari上で1,2を試してみましたが問題無く自分のアプリに組み込めそうです。

CSSだけで実現できる1つ目が導入が簡単ですが、

0% { background-position: 0px 0px; }
1% { background-position: -1px 0px; }
2% { background-position: -2px 0px; }
3% { background-position: -3px 0px; }
4% { background-position: -4px 0px; }
5% { background-position: -5px 0px; }
・
・
・
100% { background-position: -100px 0px; }

みたいに細かいアニメーションをさせようとするとCSSが長くなってしまうのが難点でしょうか。
また、１の方法だとScaleX、ScaleYを変更することで拡大縮小ができましたが、２の方ではうまくできず。

今回、20000x800の画像を使用しましたがちゃんと動作しました。

ただ、きちんとRetinaディスプレイを想定したサイズの画像を用意した割にジャギーのようなものが入ってしまい、今後の課題となりました。
ひとまずはアニメーション成功といった感じで終了です。