まずは、作ってみたサンプルです。
サンプルページ
サンプルダウンロード
サンプルでは２つの背景を動かしています。横スクロールのゲームでよくある感じだと思います。
以下、CSSで奥の背景を動かしている部分
/*背景奥*/
.bg1{
background-image: url(bg1.png);
background-position: top left;
background-size:contain;
top:0;
left:0;
width:640px;
height:480px;
position: absolute;
z-index: 1;
-webkit-animation: slide1 6s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-webkit-transform: translate3d(0, 0, 0);
}
@-webkit-keyframes slide1 {
0% { -webkit-transform: translate3d(0, 0, 0); }
99.9%,100% { -webkit-transform: translate3d(-320px, 0, 0); }
}
@-webkit-keyframes slide1で右から左に320px移動するアニメーションを定義しておく。
そして、.bg1にアニメーションを関連ずける。
-webkit-animation: slide1 6s;・・・①
-webkit-animation-iteration-count: infinite;・・・②
-webkit-animation-timing-function: linear;・・・③
-webkit-transform: translate3d(0, 0, 0);・・・④
①slide1 のアニメーションを6秒かけてするように設定
②無限ループさせるようにinfiniteと設定
③一定の速さで動くようlinearと設定
④Mobile Safairi の場合、アニメーションでいきなり transform を使うとちらつく場合があるらしいので入れといた
参考：スマートフォン対応：CSS3アニメーションを使って背景を動かしてみました
あと、@-webkit-keyframesで99.9%と指定しているのは、一部のAndroidでは100%で動かなバグがあるらしいので入れといた。
参考：AndroidブラウザでCSS3する時の注意点など