Анимированные облака с помощью CSS3 как средство анимации без использования JavaScript

Красивый CSS эффект, накладывающий летящие облака на вашу фоновую фотографию или шапку сайта

Рабочий пример
[html]<style> .cloud {
    overflow: hidden;
    position: relative;
    width:100%;
    padding-bottom: 56.25%;
    height: 0;
    background: url(https://i.imgur.com/pOKivQB.png);
    background-size: cover;
}
.cloud-content {
    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
} </style>
<div class="cloud">
    <div class="cloud-content">
        Текст на фоне
    </div>
    <img src="https://i.imgur.com/VZg0Ywh.png" alt="" class="cloud1">
    <img src="https://i.imgur.com/WjQH496.png" alt="" class="cloud2">
    <img src="https://i.imgur.com/27rFvYX.png" alt=""
class="cloud3">
    <img src="https://i.imgur.com/VZg0Ywh.png" alt="" class="cloud4">
</div>
[/html]

CSS:

.cloud {
    overflow: hidden;
    position: relative;
    width:100%;
    padding-bottom: 56.25%;
    height: 0;
    background: url(https://i.imgur.com/pOKivQB.png);
    background-size: cover;
}
.cloud-content {
    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
}

HTML:

<div class="cloud">
    <div class="cloud-content">
        Текст на фоне
    </div>
    <img src="https://i.imgur.com/VZg0Ywh.png" alt="" class="cloud1">
    <img src="https://i.imgur.com/WjQH496.png" alt="" class="cloud2">
    <img src="https://i.imgur.com/27rFvYX.png" alt="" 
class="cloud3">
    <img src="https://i.imgur.com/VZg0Ywh.png" alt="" class="cloud4">
</div>

Подпись автора

вопрос по ◆ВТ◆ в личку

вопрос по ◆ВТ◆ в тему