DTP→ほそぼそとWeb業界のカタスミでお仕事しています・・・

CSSのアニメーションを利用して、左から背景を少しずつ表示したい

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

↓完成したのは、こんな感じ
http://memo352.web.fc2.com/2017-10-michi/

イラストはS先生、作成のヒントはN先生にいただきました。
ありがとうございますm(_ _)m


コードは以下の通り

まずは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);/* 水平方向に移動 */
	}
}
関連記事

コメント

非公開コメント

※宣伝目的のようなコメントが時々あることから、コメントを承認方式に変更しました。
アダルトサイト・販売目的のサイトに誘導するもの、宣伝目的のもの、
わいせつもしくは公序良俗に反するもの、
また誤解を招くようなコメントは、削除させていただきます。

トラックバック

http://memo352.blog119.fc2.com/tb.php/868-25366772