左から、背景画像をじょじょに表示

バイト先の職業訓練学校では「実制作」なるものがありまして
訓練生さんから、質問が出た。
「背景画像の道を、左から、じょじょに表示させて、道を歩いてるような感じにしたい。」
訓練生さんのイメージするようなものが、ググってもなかったので
苦労して作ったので「めも」

↓完成したのは、こんな感じ（動かない場合はページの再読み込みをしてみて下さい）

イラストはS先生、作成のヒントはN先生にいただきました。
ありがとうございますｍ（＿　＿）ｍ

コードは以下の通り

まずはHTML　背景画像（道）をDIVで隠しています

＜div class="box1"＞
＜div class="box2"＞＜/div＞
＜/div＞

＜div class="box3"＞
＜div class="box4"＞＜/div＞
＜/div＞

次にCSS　DIVにアニメーションを付けて移動させます

html,body,div,p { margin: 0; padding: 0; }

.container{
	width:900px;
	background-color:#CCC;
	margin: 0 auto;
	overflow: hidden;
}

/* 道路上 ======================================================  */
.box1 {
	background-image:url(img/michi2.png);
	background-repeat: repeat-x;
	background-position: left top;
	width: 900px;
	height: 100px;
}

/* カバー（道路上　左から表示）===================================  */
.box2 {
	width: 900px;
	height: 100px;
	background-color: #CCC;
}

.box2 {
animation-name: animation01; /* アニメーション名を指定 */
animation-duration: 5s; /* アニメーション一回分の時間の長さ */
animation-timing-function: ease;/* アニメーションのタイミング・進行割合を指定する：easeが初期値 */
animation-fill-mode: both; /* アニメーション再生後は、最後のキーフレーム（100%）のスタイルが適用 */
}

@keyframes animation01 { /* @keyframesで動作を定義、fromからtoへアニメーション */
	from {
		transform: translateX(0px);/* 水平方向に移動 */
	}
	to {
		transform: translateX(980px);/* 水平方向に移動 */
	}
}


/* 道路下 ======================================================  */
.box3 {
	background-image:url(img/michi3.png);
	background-repeat: repeat-x;
	background-position: left top;
	width: 900px;
	height: 100px;
	margin-top:-10px;
}


/* カバー（道路上　右から表示）===================================  */
.box4 {
	width: 900px;
	height: 100px;
	background-color: #CCC;
	margin-top:0px;
}


.box4 {
animation-name: animation02; /* アニメーション名を指定 */
animation-duration: 5s; /* アニメーション一回分の時間の長さ */
animation-timing-function: ease-out;/* アニメーションの終了付近の動きを緩やかにする */
animation-fill-mode: both; /* アニメーション再生後は、最後のキーフレーム（100%）のスタイルが適用 */
animation-delay: 4s; /* アニメーションが開始するまでの時間を指定：0sが初期値 */
}


@keyframes animation02 { /* @keyframesで動作を定義、fromからtoへアニメーション */
	from {
		transform: translateX(0);/* 水平方向に移動 */
	}
	to {
		transform: translateX(-980px);/* 水平方向に移動 */
	}
}