Красивые движущиеся облака на CSS

При помощи CSS  можно создать красивый эффект движущихся облаков по верх фонового изображения. Для этого вам всего лишь нужно скачать картинки облачка, установить небольшой фрагмент HTML  кода . Облака можно скачать ниже в галереи изображений. Класс .cloud отвечает за основной блок и его размеры, .cloudcontent за информацию на основном  блоке. 

И так приступим к поэтапной установке красивых движущихся облаков на сайт.

HTML

<div class="cloud">
    <div class="cloudcontent">
      Просто текст на фоне
    </div>
    <img src="cloud-01.png" alt="" class="cloud1">
    <img src="cloud-02.png" alt="" class="cloud2">
    <img src="cloud-03.png" alt="" class="cloud3">
    <img src="cloud-04.png" alt="" class="cloud4">
</div>

CSS

.cloud {
    overflow: hidden;
    position: relative;
    width:100%;
    padding-bottom: 56.25%;
    height: 0;
    background: url(mountain.jpg);
    background-size: cover;
}
.cloudcontent {
    position: relative;
    padding:30px;
    color: #337AB7;
    font-size:22px;
    font-weight:bold;
    z-index:100;
}
.cloud img {
    width: 100%;
    left: 0;
    top: 0;
    position: absolute;
    -webkit-user-select: none; 
    -moz-user-select: none;   
    -ms-user-select: none;
    user-select: none;    
    pointer-events: none;
}
@-webkit-keyframes animCloud {
    from {
        -webkit-transform: translateX(100%)
    }
    to {
        -webkit-transform: translateX(-100%)
    }
}
@-moz-keyframes animCloud {
    from {
        -moz-transform: translateX(100%)
    }
    to {
        -moz-transform: translateX(-100%)
    }
}
@keyframes animCloud {
    from {
        -webkit-transform: translateX(100%);
        -moz-transform: translateX(100%);
        -ms-transform: translateX(100%);
        -o-transform: translateX(100%);
        transform: translateX(100%)
    }
    to {
        -webkit-transform: translateX(-100%);
        -moz-transform: translateX(-100%);
        -ms-transform: translateX(-100%);
        -o-transform: translateX(-100%);
        transform: translateX(-100%)
    }
}
.cloud1 {
    -webkit-animation: animCloud 20s infinite linear;
    -moz-animation: animCloud 20s infinite linear;
    animation: animCloud 20s infinite linear
}
.cloud2 {
    -webkit-animation: animCloud 40s infinite linear;
    -moz-animation: animCloud 40s infinite linear;
    animation: animCloud 40s infinite linear
}
.cloud3 {
    -webkit-animation: animCloud 60s infinite linear;
    -moz-animation: animCloud 60s infinite linear;
    animation: animCloud 60s infinite linear
}
.cloud4 {
    -webkit-animation: animCloud 80s infinite linear;
    -moz-animation: animCloud 80s infinite linear;
    animation: animCloud 80s infinite linear
}