自転車でうろうろ(GIFファイルでCSSアニメ）
自分のサイト上でキャラクターを動かそうと思い、GIFファイルを準備してCSSで動かしてみると、この自転車のように画像背景が邪魔になりました。これを解決するには、背景を透過させたPNGファイルを使ってスプライト処理しかないのか？？と思いましたが、以前、私のスキル不足で、このはてなブログ上に表示させられなかったこともあり、こんな私でも動かせる方法が、他にないものかと考えていました。
GIF形式で背景を透過にできれば解決すると考え、透過GIFについて調べてみると、私のフリーソフト装備だけではちょっと作成が難しいみたい。しかも、色の表現に限りがあるファイル形式なのに、その中から透明色を１つ選んで背景としているため、画像と背景の間にギザギザが残ったり、影の透過表現ができないので背景を選ぶ。。。らしいとわかりました。
じゃあ、透過PNGファイルでスプライト処理の一択なのか、、、と、半分あきらめて、さらに調べてみたら、、、
「え？PNGファイルでアニメ？！」「APNG形式ですと？！」と私が知らなかったものが登場していることがわかりました。しかも、もう結構前の技術なのですね（笑）。自分が勉強し始めた頃（ウン年前）には無かったな（笑）と思いつつ、ずっと勉強し続けないとついていけないな、、、と反省しました。
ただ、まだ対応していない場面もあるらしく、その場合はアニメはしないが、１枚目の画像は表示されるという親切設定。へえ、便利〜。すごーい！と思い、早速、このはてなブログ上で再現してみたら、、、、ダメでしたーー（笑）１枚目の画像で止まってしまいます。
残念。。。
でも、せっかく、APNGファイルを再現するためにHTMLとCSSで一回記事書いたので、APNGファイルをGIFファイルに差し替えてブログ上で動かすことにしました（笑）
動く仕組みを知りたい方は過去の記事で
この時はテキストを動かしてましたが、代わりにアニメファイルを指定すればよいだけです。
枠内をぐるぐる(GIFファイルでCSSアニメ）
GIFアニメのタイミングと移動のタイミングを合わせるのが難しいですが、一番上の自転車も歩行ロボくんもいっちょ前にレスポンシブ対応です。
ひとまず、アニメの時間とCSS側の時間を合わせて、なんとなくタイミングを近づけることはできますが、リロードされるとずれたり、キャッシュに残った画像だったりと、、、私のスキル不足でこのブログ上で制御できない（笑）
多分、APNG形式をつかったとしてもこの問題は変わらないでしょうね。短い繰り返しのアニメと割り切って使うなら、APNG形式はファイルを指定するだけで簡単に透過アニメが作成できるというレベルの話でしょう。
アニメを分断して繋げるようにするとか、もっとうまい回避方法があるのかもな。。。とか思いますが、やはりアニメの時間を管理できるスプライト処理が一番理想な気がして、もう一度試してみました。前回の記事では、はてなブログ上に再現できなかったので再挑戦になります！
う〜ん、やはり画像を要素内でずらしていく方法では、はてなブログ上で全然再現できない。。。
しょうがないので背景をずらす方法で再現したら、、、あら、あっさりできるとか（↓下のやつ↓）、、、何事もしっかり理解しないとすんなりいかないものですね。。。。
歩くロボくん(透過PNGファイルでスプライト処理）
で、これを上下左右に要素を動かせばいいわけですから、、、
スプライト処理で枠内ぐるぐる
アニメが透過しているのを表現するためにわざと文の上を歩かせてます。この親要素に景色背景入れればなにかに使えますな！まあ、ブラウザでわざわざ合体させなくてもいいですけど（笑）
はてなブログで再現するときの注意点は、背景画像の横幅が1200px超えると1200pxに合わせられてしまうみたいなので、keyframesのずらす幅と要素の横幅を気をつけないとおかしな挙動になってしまいます。上の小さいロボくんが、はてなブログ側でサイズ修正された原寸のまま動かした例で、大きいほうがbackground-sizeでサイズをもとに戻して動かした例です。大きいほうの画質がボケているのは、縮小、拡大が意図せずに行われているためです。。。
このボケる画像の回避は、現在の私のスキルではどうにもならん（笑）
ああ、そもそも元の画像を1200pxに収めればいいわけか。。。そうすると、単純な動きの表現でしか大きさをキープできませんね。画像を指定する方法ならいけるかも。めんどくさいので、やってみる気にもなりませんが（笑）
ちなみに、この大小の上下左右の動きは同じコードです。完結する秒数を変えているだけです。
結局、複雑なアニメの表現はスプライト処理、簡単なアニメはGIFかAPNG。ただし、APNGは環境に依存するってことですね〜。
それならば、すべてスプライト処理で対応すれば、、、と考えてしましますが、スプライト処理ですと、ちょっとした変更でもCSS作業量が多くなるので、できれば回避したい（笑）と思ってしまいますよね。やはり、ファイルを指定するだけのほうが、後々の管理は圧倒的にしやすいので、できればそうしたいなと（笑）
