Animated Clouds

Animated-Clouds.markdown

Animated Clouds

Just some css animations for cloud effect

A Pen by Craig Wayne on CodePen.

License.

index.html

<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>

style.css

   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;
        }
    }