Pure CSS3 Cloud Animation

info : http://www.kangrian.com

HTML

<div class="cloud cloud-1"></div>
	<div class="cloud cloud-2"></div>
	<div class="cloud cloud-3"></div>
	<div class="cloud cloud-4"></div>

<span style='font-family:comic sans ms;'>More info : <a href="http://rian-nurherdian.blogspot.com" target="_blank" style='color:white;text-decoration:none;border-bottom:1px solid #fff;text-shadow:1px 1px 3px #333;'>http://www.kangrian.com</a></span>

CSS

body { background:#69b1e2; }

.cloud {
	background-repeat: no-repeat;
	display: block;
	position: absolute;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-name: cloud-move;
    -webkit-animation-timing-function: linear;
}

.ie7 .cloud, .ie6 .cloud {
	z-index: -1;
}

.cloud-1 {
	background-image: url(http://playramps.com/img/cloud-1.png);
	height: 61px;
	left: 8%;
	top: 20px;
	width: 176px;
	-webkit-animation-duration: 10s;
}
.cloud-2 {
	background-image: url(http://playramps.com/img/cloud-2.png);
	height: 65px;
	left: -5%;
	top: 200px;
	width: 189px;
	-webkit-animation-duration: 5s;
}
.cloud-3 {
	background-image: url(http://playramps.com/img/cloud-3.png);
	height: 61px;
	left: 90%;
	top: -10px;
	width: 176px;
	-webkit-animation-duration: 5s;
}
.cloud-4 {
	background-image: url(http://playramps.com/img/cloud-4.png);
	height: 31px;
	left: 35%;
	top: 300px;
	width: 274px;
	-webkit-animation-duration: 5s;
}

@-webkit-keyframes cloud-move {
	from { 
		left: 100%; 
		-webkit-transform: translateX(0%);
	}
	to { 
		left: -50%; 
		-webkit-transform: translateX(-100%);
	}
}