css3-cloud

css3-cloud.css

/*
//////////////////////////////////////////////////
				CLOUD
//////////////////////////////////////////////////
*/
#clouds {
	padding:100px 0px;
	background:#c9dbe9;
	background:-webkit-linear-gradient(top, #c9dbe9 0%, #fff 100%);
	background:-linear-gradient(top, #c9dbe9 0%, #fff 100%);
	background:-moz-linear-gradient(top, #c9dbe9 0%, #fff 100%);
}
.cloud {
	width:200px;
	height:60px;
	background:#fff;
	border-radius:200px;
	-moz-border-radius:200px;
	-webkit-border-radius:200px;
	position:relative;
}
.cloud:before, .cloud:after {
	content:'';
	position:absolute;
	width:100px;
	height:80px;
	background:#fff;
	position:absolute;
	top:-15px;
	left:10px;
	border-radius:100px;
	-moz-border-radius:100px;
	-webkit-border-radius:100px;
	-webkit-transform:rotate(30deg);
	transform:rotate(30deg);
	-moz-transform:rotate(30deg);
}
.cloud:after {
	width:120px;
	height:120px;
	top:-55px;
	left:auto;
	right:15px;
}
/*
//////////////////////////////////////////////////
				CLOUD Animation Code
//////////////////////////////////////////////////
*/

.x1 {
	-webkit-animation:moveclouds 45s linear infinite;
	-moz-animation:moveclouds 45s linear infinite;
	-o-animation:moveclouds 45s linear infinite;
}
.x2 {
	left:200px;
	-webkit-transform:scale(0.6);
	-mox-transform:scale(0.6);
	transform:scale(0.6);
	opacity: 0.6; /*opacity proportional to the size*/
	-webkit-animation:moveclouds 65s linear infinite;
	-moz-animation:moveclouds 50s linear infinite;
	-o-animation:moveclouds 50s linear infinite;
}
.x3 {
	left:-250px;
	top:-175px;
	-webkit-transform:scale(0.8);
	-mox-transform:scale(0.8);
	transform:scale(0.8);
	opacity: 0.6; /*opacity proportional to the size*/
	-webkit-animation:moveclouds 60s linear infinite;
	-moz-animation:moveclouds 50s linear infinite;
	-o-animation:moveclouds 50s linear infinite;
}
.x4 {
	left:470px;
	top:-250px;
	-webkit-transform:scale(0.75);
	-mox-transform:scale(0.75);
	transform:scale(0.75);
	opacity: 0.75; /*opacity proportional to the size*/
	-webkit-animation:moveclouds 102s linear infinite;
	-moz-animation:moveclouds 102s linear infinite;
	-o-animation:moveclouds 102s linear infinite;
}
.x5 {
	left:-150px;
	top:-150px;
	-webkit-transform:scale(0.8);
	-mox-transform:scale(0.8);
	transform:scale(0.8);
	opacity: 0.8; /*opacity proportional to the size*/
	-webkit-animation:moveclouds 70s linear infinite;
	-moz-animation:moveclouds 60s linear infinite;
	-o-animation:moveclouds 60s linear infinite;
}
.x6 {
	left:50px;
	top:-280px;
	opacity: 0.4; /*opacity proportional to the size*/
	-webkit-animation:moveclouds 55s linear infinite;
	-moz-animation:moveclouds 55s linear infinite;
	-o-animation:moveclouds 55s linear infinite;
}
.x7 {
	left:-80px;
	top:-225px;
	-webkit-transform:scale(0.8);
	-mox-transform:scale(0.8);
	transform:scale(0.8);
	opacity: 0.8; /*opacity proportional to the size*/
	-webkit-animation:moveclouds 98s linear infinite;
	-moz-animation:moveclouds 98s linear infinite;
	-o-animation:moveclouds 98s linear infinite;
}
@-webkit-keyframes moveclouds {
 0% {
 margin-left:110%;
}
 100% {
 margin-left:-110%;
}
}
@-moz-keyframes moveclouds {
 0% {
 margin-left:110%;
}
 100% {
 margin-left:-110%;
}
}
@-o-keyframes moveclouds {
 0% {
 margin-left:110%;
}
100% {
 margin-left:-110%;
}
}