CSS Animations Module Level 3 と CSS Sprite

CSS3のAnimation Moduleに失望しました。

GIF Animationは広く使われているものの、色数がおおよそ256色、半透明の未サポート、ファイルサイズが大きくなりやすい、などなど、欠点があるので、他の方法を模索していました。

今のところ、JavaScriptを使ってちまちまと書き換えする方法を採っています。

そこでCSS SpriteとCSS3のAnimationを組み合わせることで、GIF Animationの代わりにならないかという案を思いつきました。
CSS Animationはkeyframeでstyleを指定するとタイムラインに従ってstyleが変化するというもの。つまり、background-positionを指定すればアニメーションする！ と思ったわけです。

１つ目の問題点はbackground-positionはxとyを同時に指定してしまう点。片方だけを指定してもう片方をinheritすることはできません。これは案外痛いです。
もう１つが致命的。background-positionがlinear変化する点。linearでなくてもベジエ曲線で定義することはできるものの、CSS Spriteで求められているのはstepというか、keyframeで指定した値に直接変化すること。おかげで、にょろにょろにょろとCSS Sprite画像がスムーズにスクロールしてしまいます。

まさにどうしてこうなった状態。