Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Animated Clouds
<div id="sky">
<div class="cloud"></div>
<div class="cloud"></div>
<div class="cloud"></div>
<div class="cloud"></div>
<div class="cloud"></div>
<div class="cloud"></div>
<div class="cloud"></div>
<div class="cloud"></div>
<div class="cloud"></div>
<div class="cloud"></div>
</div>
body {
overflow: hidden;
margin: 0;
padding: 0;
}
#sky {
padding: 100px 0;
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%);
height: 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;
background: #fff;
width: 100px;
height: 80px;
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:nth-of-type(1) {
-webkit-animation: moveclouds 15s linear infinite;
-moz-animation: moveclouds 15s linear infinite;
-o-animation: moveclouds 15s linear infinite;
}
.cloud:nth-of-type(2) {
left: 200px;
-webkit-transform: scale(0.6);
-moz-transform: scale(0.6);
transform: scale(0.6);
opacity: 0.6;
-webkit-animation: moveclouds 25s linear infinite;
-moz-animation: moveclouds 25s linear infinite;
-o-animation: moveclouds 25s linear infinite;
}
.cloud:nth-of-type(3) {
left: -250px;
top: -200px;
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
transform: scale(0.8);
opacity: 0.8;
-webkit-animation: moveclouds 20s linear infinite;
-moz-animation: moveclouds 20s linear infinite;
-o-animation: moveclouds 20s linear infinite;
}
.cloud:nth-of-type(4) {
left: 470px;
top: -250px;
-webkit-transform: scale(0.75);
-moz-transform: scale(0.75);
transform: scale(0.75);
opacity: 0.75;
-webkit-animation: moveclouds 18s linear infinite;
-moz-animation: moveclouds 18s linear infinite;
-o-animation: moveclouds 18s linear infinite;
}
.cloud:nth-of-type(5) {
left: -150px;
top: -150px;
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
transform: scale(0.8);
opacity: 0.8;
-webkit-animation: moveclouds 20s linear infinite;
-moz-animation: moveclouds 20s linear infinite;
-o-animation: moveclouds 20s linear infinite;
}
.cloud:nth-of-type(7) {
left: -300px;
top: -197px;
-webkit-transform: scale(2);
-moz-transform: scale(2);
transform: scale(2);
opacity: 0.4;
-webkit-animation: moveclouds 100s linear infinite;
-moz-animation: moveclouds 100s linear infinite;
-o-animation: moveclouds 100s linear infinite;
}
.cloud:nth-of-type(8) {
left: -80px;
top: -97px;
-webkit-transform: scale(1);
-moz-transform: scale(1);
transform: scale(1);
opacity: 0.6;
-webkit-animation: moveclouds 50s linear infinite;
-moz-animation: moveclouds 50s linear infinite;
-o-animation: moveclouds 50s linear infinite;
}
.cloud:nth-of-type(9) {
left: -30px;
top: -30px;
-webkit-transform: scale(0.3);
-moz-transform: scale(0.3);
transform: scale(0.3);
opacity: 1;
-webkit-animation: moveclouds 90s linear infinite;
-moz-animation: moveclouds 90s linear infinite;
-o-animation: moveclouds 90s linear infinite;
}
.cloud:nth-of-type(10) {
left: -100px;
top: -80px;
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
transform: scale(1.5);
opacity: 0.9;
-webkit-animation: moveclouds 20s linear infinite;
-moz-animation: moveclouds 20s linear infinite;
-o-animation: moveclouds 20s linear infinite;
}
@-webkit-keyframes moveclouds {
0% {
margin-left: 1000px;
}
100% {
margin-left: -1000px;
}
}
@-moz-keyframes moveclouds {
0% {
margin-left: 1000px;
}
100% {
margin-left: -1000px;
}
}
@-o-keyframes moveclouds {
0% {
margin-left: 1000px;
}
100% {
margin-left: -1000px;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.