<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
    <div id="wrap">
		  <img src="http://chrisskinner.co/lab/landscape/img/window-open.png" alt="open-window" width="700" height="524" class="window open">
		  <img src="http://chrisskinner.co/lab/landscape/img/landscape.png" alt="landscape" width="520" height="368" class="landscape background">
		  <img src="http://chrisskinner.co/lab/landscape/img/low_clouds.png" alt="low_clouds" width="220" height="53" class="low clouds">
		  <img src="http://chrisskinner.co/lab/landscape/img/mid_clouds.png" alt="mid_clouds" width="220" height="80" class="mid clouds">
		  <img src="http://chrisskinner.co/lab/landscape/img/high_clouds.png" alt="high_clouds" width="220" height="75" class="high clouds">
		  <img src="http://chrisskinner.co/lab/landscape/img/mountain.png" alt="mountain" width="520" height="368" class="mountain background">
		  <img src="http://chrisskinner.co/lab/landscape/img/sky.png" alt="sky" width="520" height="368" class="sky background">
		  <img src="http://chrisskinner.co/lab/landscape/img/tree.png" alt="tree" width="520" height="368" class="tree background">
		  <img src="http://chrisskinner.co/lab/landscape/img/track.png" alt="" width="520" height="22" class="track background">
		  <img src="http://chrisskinner.co/lab/landscape/img/fence.png" alt="fence" width="520" height="42" class="fence">
		  <img src="http://chrisskinner.co/lab/landscape/img/ballon.png" alt="ballon" width="10" height="14" class="ballon background">
		  <div class="plane">
			  <img src="http://chrisskinner.co/lab/landscape/img/plane.png" alt="plane" width="16" height="8">
		  </div>
		  <div class="train">
			  <img src="http://chrisskinner.co/lab/landscape/img/train.png" alt="train" width="115" height="116">
			  <div class="wrapper">
		    	<div class="crank"></div>
			  </div>
		  </div>
		  <div class="truck t-1">
			  <img src="http://chrisskinner.co/lab/landscape/img/truck.png" alt="truck_1" width="84" height="71">
		  </div>
		  <div class="truck t-2">
			  <img src="http://chrisskinner.co/lab/landscape/img/truck.png" alt="truck_2" width="84" height="71">
		  </div>
		  <div class="truck t-3">
			  <img src="http://chrisskinner.co/lab/landscape/img/truck.png" alt="truck_3" width="84" height="71">
		  </div>
	  </div>
  </body>
</html>
/* Styles go here */
/******* ANIMATION ********/

body {
	margin: 0;
	padding: 0;
}

#wrap {
	width: 700px;
	height: 524px;
	margin: 0 auto;
	position: relative;
}

.window { z-index: 99}

img { position: absolute;}

.background {
	width: 520px;
	top: 80px;
	left: 125px;
	z-index: 2;
}


/** Clouds **/
.clouds {
	 width: 220px;
	 opacity: 0;
}

.low {
	top: 180px;
	left: 0px;
	-webkit-animation: cloud-move 53s linear 2s infinite;
	-moz-animation: cloud-move 53s linear 2s infinite;
	z-index: 19;
}
.mid {
	top: 110px;
	left: 0px;
	-webkit-animation: cloud-move 70s linear 5s infinite;
	-moz-animation: cloud-move 70s linear 5s infinite;
	z-index: 18;
}
.high {
	top: 80px;
	left: 130px;
	-webkit-animation: cloud-move 173s linear infinite alternate;
	-moz-animation: cloud-move 173s linear infinite alternate;
	z-index: 17;
}

/** Plane **/
.plane {
	width: 16px;
	height: 8px;
	z-index: 11;
	position: absolute;
	left: 500px;
	top: 130px;
	-webkit-animation: plane-move 35s linear 4s infinite;
	-moz-animation: plane-move 35s linear 4s infinite;
}

.plane img,
.train img {
	width: 100%;
}

/** Train **/
.train,
.wrapper,
.truck { position: absolute; z-index: 40;}

.train {
	width: 150px;
	height: 116px;
	left: 0;
	top: 319px;
	-webkit-animation: train-move 16s linear 4s;
	-moz-animation: train-move 16s linear 4s;
}

.train img { width: 100%; }

.train:after {
	content: '';
	background: url('http://chrisskinner.co/lab/landscape/img/smoke.png') no-repeat;
	background-size: 118px;
	height: 52px;
	width: 118px;
	display: block;
	position: absolute;
	top: -47px;
	left: 20px;
	opacity: 0;
	-webkit-animation: steam 4s infinite;
	-moz-animation: steam 4s infinite;
}

.wrapper { 
	width: 83px;
	margin: 0;
	-webkit-animation: crank-up 2s linear infinite;
	-moz-animation: crank-up 2s linear infinite;
	top: 88px;
	left: 35px;
}

.crank {
	display: inline-block;
	padding: 0;
	background: url('http://chrisskinner.co/lab/landscape/img/crank.png') no-repeat;
	width: 78px;
	height: 10px;
	background-size: 78px;
	-webkit-animation: crank-down 2s linear infinite;
	-moz-animation: crank-down 2s linear infinite;
}

.truck {
	width: 84px;
	height: 71px;
	left: 0;
	top: 364px;
}

.t-1 {
  -webkit-animation: train-move 16s linear 6.5s;
  -moz-animation: train-move 16s linear 6.5s;
}
.t-2 {
  -webkit-animation: train-move 16s linear 9s;
  -moz-animation: train-move 16s linear 9s;
}
.t-3 {
  -webkit-animation: train-move 16s linear 11.5s;
  -moz-animation: train-move 16s linear 11.5s;
}

.truck img { width: 100%; }

.truck:before,
.truck:after {
	content: '';
	background: url('http://chrisskinner.co/lab/landscape/img/cog.png') no-repeat;
	background-size: 8px;
	width: 8px;
	height: 8px;
	display: block;
	position: absolute;
	-moz-animation: cog 2s linear infinite;
	-webkit-animation: cog 2s linear infinite;
}

.truck:before { bottom: 10px; left: 26px; z-index: 9999999;}
.truck:after { bottom: 10px; left: 62px; z-index: 9999999;}



/** Ballon **/
.ballon {
	z-index: 17;
	width: 10px;
	height: 14px;
	-moz-animation: ballon-fly 133s linear infinite reverse;
	-webkit-animation: ballon-fly 133s linear infinite reverse;
	left:350px;
	top: 193px;
}


/** Background elements **/
.sky { z-index: 10; }
.mountains { z-index: 30; }
.fence { z-index: 40; top: 404px; left: 75px;}
.landscape { z-index: 40;}
.track { z-index: 41; top: 427px; left: 80px;}
.tree { z-index: 50; }

/******** KEYFRAMES ********/

/** Ballon-move **/
@-webkit-keyframes ballon-fly {
	20% { -webkit-transform: translate(13px, 22px) rotate(1deg);
	-webkit-transform-origin: 50% 50%; }
	30% { -webkit-transform: translate(13px, 22px) rotate(1deg); 
	-webkit-transform-origin: 50% 50%; }
	40% { -webkit-transform: translate(73px, 12px) rotate(1deg);
	-webkit-transform-origin: 50% 50%; }
	60% { -webkit-transform: translate(143px, -22px) rotate(1deg);
	-webkit-transform-origin: 50% 50%; }
	80% { -webkit-transform: translate(73px, -22px) rotate(1deg);
	-webkit-transform-origin: 50% 50%; }
	100% { -webkit-transform: translateY(0, 0) rotate(-1deg);
	-webkit-transform-origin: 50% 50%; }
}


/** Cloud-move **/
@-webkit-keyframes cloud-move {
	7%,
	90% { opacity: 1; }
	100% { -webkit-transform: translateX(460px); opacity: 0;}
}
@-moz-keyframes cloud-move {
	7%,
	90% { opacity: 1; }
	100% { -moz-transform: translateX(460px); opacity: 0;}
}
@-o-keyframes cloud-move {
	7%,
	90% { opacity: 1; }
	100% { -o-transform: translateX(460px); opacity: 0;}
}
keyframes cloud-move {
	7%,
	90% { opacity: 1; }
	100% { transform: translateX(460px); opacity: 0;}
}

/** Plane-move **/
@-webkit-keyframes plane-move {
	100% { -webkit-transform: translateX(-420px); }
}
@-moz-keyframes plane-move {
	100% { -moz-transform: translateX(-420px); }
}
@-o-keyframes plane-move {
	100% { -o-transform: translateX(-420px); }
}
keyframes plane-move {
	100% { transform: translateX(-420px); }
}

/** Train-move **/	
@-webkit-keyframes train-move {
	100% { -webkit-transform: translateX(530px); }
}
@-moz-keyframes train-move {
	100% { -moz-transform: translateX(530px); }
}
@-o-keyframes train-move {
	100% { -o-transform: translateX(530px); }
}
keyframes train-move {
	100% { transform: translateX(530px); }
}

/** Train-wheels **/
@-webkit-keyframes crank-up {
	100% { -webkit-transform: rotate(360deg);}
}
@-moz-keyframes crank-up {
	100% { -moz-transform: rotate(360deg);}
}
@-o-keyframes crank-up {
	100% { -o-transform: rotate(360deg);}
}
keyframes crank-up {
	100% { transform: rotate(360deg);}
}

@-webkit-keyframes crank-down {
	100% { -webkit-transform: rotate(-360deg);}
}
@-moz-keyframes crank-down {
	100% { -moz-transform: rotate(-360deg);}
}
@-o-keyframes crank-down {
	100% { -o-transform: rotate(-360deg);}
}
keyframes crank-down {
	100% { transform: rotate(-360deg);}
}

@-webkit-keyframes cog {
	100% { -webkit-transform: rotate(360deg);}
}

/** Train-smoke **/
@-webkit-keyframes steam {
	40%,
	60% { opacity: 1; }
	100% { -webkit-transform: translate(-15%, -25%) rotateZ(-5deg);}
}
CSS3 Train Animation. CSS3 Animations and Keyframe Project using Sass and bourbon mixins