<div id="airplane">
   <div id="oblaka1" class="oblaka"></div>
   <div id="oblaka2" class="oblaka"></div>
   <div id="oblaka3" class="oblaka"></div>
   <div id="oblaka4" class="oblaka"></div>
   <div id="oblaka5" class="oblaka"></div>
   <div id="oblaka6" class="oblaka"></div>
   <div id="oblaka7" class="oblaka"></div>
   <div id="aeroplane"></div>
</div>

#airplane {
    overflow: hidden;
    position: relative;
    background: #C6D9E8;
    background: -webkit-linear-gradient(top, #C6D9E8 0%, #fff 100%);
    background: -linear-gradient(top, #C6D9E8 0%, #fff 100%);
    background: -moz-linear-gradient(top, #C6D9E8 0%, #fff 100%);
    height: 400px;
}

.oblaka {
    position: absolute;
    background-image: url('http://zornet.ru/Images/izobrazheniye/oblaka1.png');
    background-repeat: no-repeat;
    width: 176px;
    height: 114px;
}

#oblaka1 {
    top: 40px;
    left: 400px;
    -webkit-animation: movingoblakas 10s linear infinite;
    -moz-animation: movingoblakas 10s linear infinite;
    -o-animation: movingoblakas 10s linear infinite;
}

#oblaka2 {
    top: 10px;
    left: 600px;
    -webkit-animation: movingoblakas 13s linear infinite;
    -moz-animation: movingoblakas 13s linear infinite;
    -o-animation: movingoblakas 13s linear infinite;
}

#oblaka3 {
    top: 100px;
    left: 100px;
    -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
    -ms-transform: scale(0.9);
    transform: scale(0.9);
    opacity: 0.9;
    -webkit-animation: movingoblakas 15s linear infinite;
    -moz-animation: movingoblakas 15s linear infinite;
    -o-animation: movingoblakas 15s linear infinite;
}

#oblaka4 {
    top: -20px;
    left: 40px;
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    -ms-transform: scale(0.8);
    transform: scale(0.8);
    opacity: 0.8;
    -webkit-animation: movingoblakas 20s linear infinite;
    -moz-animation: movingoblakas 20s linear infinite;
    -o-animation: movingoblakas 20s linear infinite;
}

#oblaka5 {
    top: 100px;
    left: 500px;
    -webkit-transform: scale(0.7);
    -moz-transform: scale(0.7);
    -ms-transform: scale(0.7);
    transform: scale(0.7);
    opacity: 0.7;
    -webkit-animation: movingoblakas 25s linear infinite;
    -moz-animation: movingoblakas 25s linear infinite;
    -o-animation: movingoblakas 25s linear infinite;
}

#oblaka6 {
    top: 20px;
    left: 200px;
    -webkit-transform: scale(0.5);
    -moz-transform: scale(0.5);
    -ms-transform: scale(0.5);
    transform: scale(0.5);
    opacity: 0.5;
    -webkit-animation: movingoblakas 27s linear infinite;
    -moz-animation: movingoblakas 27s linear infinite;
    -o-animation: movingoblakas 27s linear infinite;
}

#oblaka7 {
    top: 92px;
    left: 700px;
    -webkit-transform: scale(0.4);
    -moz-transform: scale(0.4);
    -ms-transform: scale(0.4);
    transform: scale(0.4);
    opacity: 0.4;
    -webkit-animation: movingoblakas 29s linear infinite;
    -moz-animation: movingoblakas 29s linear infinite;
    -o-animation: movingoblakas 29s linear infinite;
}

#aeroplane{
    position: absolute;
    background-image: url('http://zornet.ru/Images/izobrazheniye/airbus.png');
    background-repeat: no-repeat;
    width: 200px;
    height: 70px;
    -webkit-animation: movingplane 10s linear infinite;
    -moz-animation: movingplane 10s linear infinite;
    -o-animation: movingplane 10s linear infinite;
}
@keyframes movingoblakas {
    0% {margin-left: 100%;}
    100% {margin-left: -150%;}
}
@-webkit-keyframes movingoblakas {
    0% {margin-left: 100%;}
    100% {margin-left: -150%;}
}
@-moz-keyframes movingoblakas {
    0% {margin-left: 100%;}
    100% {margin-left: -150%;}
}
@keyframes movingplane {
    0% {
        margin-left: 100%;
        top:300px;
    }
    29% {
        margin-left: 50%;
        top: 50px;
        -webkit-transform: rotate(20deg);
     -moz-transform: rotate(20deg);
        -ms-transform: rotate(20deg);
     transform: rotate(20deg);
    }
    31% {
        -webkit-transform: rotate(-20deg);
     -moz-transform: rotate(-20deg);
        -ms-transform: rotate(-20deg);
     transform: rotate(-20deg);
    }
    60% {
        margin-left: 0%;
        top 300px;    
    }
    100% {
        margin-left: -100%;
        top: 300px;
    }
}
@-webkit-keyframes movingplane {
    0% {
        margin-left: 100%;
        top:300px;
    }
    29% {
        margin-left: 50%;
        top: 50px;
        -webkit-transform: rotate(20deg);
     -moz-transform: rotate(20deg);
        -ms-transform: rotate(20deg);
     transform: rotate(20deg);
    }
    31% {
        -webkit-transform: rotate(-20deg);
     -moz-transform: rotate(-20deg);
        -ms-transform: rotate(-20deg);
     transform: rotate(-20deg);
    }
    60% {
        margin-left: 0%;
        top 300px;    
    }
    100% {
        margin-left: -100%;
        top: 300px;
    }
}
@-moz-keyframes movingplane {
    0% {
        margin-left: 100%;
        top:300px;
    }
    29% {
        margin-left: 50%;
        top: 50px;
        -webkit-transform: rotate(20deg);
     -moz-transform: rotate(20deg);
        -ms-transform: rotate(20deg);
     transform: rotate(20deg);
    }
    31% {
        -webkit-transform: rotate(-20deg);
     -moz-transform: rotate(-20deg);
        -ms-transform: rotate(-20deg);
     transform: rotate(-20deg);
    }
    60% {
        margin-left: 0%;
        top 300px;    
    }
    100% {
        margin-left: -100%;
        top: 300px;
    }
}