CSS3 Анимация с несколькими облаками

Данная CSS3 анимация создается с правилами @ KeyFrames . Облако, как в этом примере, запускается в указанное время различными состояниями или так называемыми ключевыми кадрами. Каждое изображение может иметь, таким образом, различные свойства, такие как размер или положение.

В простейшем случае, анимация создается двумя ключевыми кадрами. Облако движется после загрузки страницы, в пределах 20 секунд от точки А в точку Б, и он будет медленно уменьшаться.

HTML является относительно простым.

<div id="wolken1">
    <img src="/bilder/wolke.png" alt="animierte Wolke"
      title="animierte weiße Wolke" width="140" height="167">
</div>

И связанный CSS3.

#wolken1 {
    overflow: hidden;
    height: 13.75em;
    background: #1f4778;
    border: 5px solid #eee;
    box-shadow: 1px 1px 5px 2px #777;
    margin: 2em;
}

#wolken1 img {
    animation: wolken11 20s infinite linear;
}

@keyframes wolken11 {
      0%{transform: scale(1.5) translate3d(-130px,20px,0)}
    100%{transform: scale(1) translate3d(620px,20px,0)}
}

«overflow: hidden» в «контейнере «DIV» это требуется, чтобы облако было только в кадре. Изображение в контейнере затем вызывает «@keyframes» правило с именем «wolken11» и устанавливает продолжительность анимации на 20 секунд, количество повторений не ограничено (бесконечно) и движется прямолинейно.

Отдельные шаги «@keyframes» правил будут указаны в процентах, от 0% и до 100%. Проценты должны быть заданы относительно заданной длительности.
Облако установлено в масштабе «(1,5) » при запуске, и достигает нормального размера в конце анимации.Устанавливая «translate3d (х, у, г)» вы определяете направление движения. Первое значение — горизонтальное направлении, второе для вертикального направлении и третье по глубине. 3D-преобразования имеют большое преимущество, они могут быть вычислены с графической карты и, следовательно, работать немного более гладко, чем, например, путем указания «налево»!

#wolke22 {
    position: absolute;
    top: 200px;
    animation: wolken22 20s infinite linear;
}
@keyframes wolken22 {
    0%{left: -130px;transform: scale(1.5)}
    100%{left: 620px;transform: scale(1)}
}

В следующем примере, три шага определены, а кроме того, перечислен CSS свойство для прозрачности  и вертикальное направление изменяется на половину времени . Измените CSS3-линию для первой инстанции, чтобы увидеть это.

@keyframes wolken31 {
      0%{opacity: 1;transform: scale(1.5) translate3d(-130px,20px,0)}
     50%{opacity: .2;transform: scale(1.5) translate3d(100px,20px,0)}
    100%{opacity: 1;transform: scale(1) translate3d(620px,-10px,0)}
}

Но для красивого примера нужно больше облаков, и они также должны двигаться с разной скоростью.
Во-первых, div-Container должен быть с «position: relative», так, что бы можно было каждое облако соответственно позиционировать. И чтобы второе облако начинало движение только через 20 секунд, вы должны с помощью «left: 135px» сделать, так, что облако сначала помещается вне поля зрения контейнера.
Для временной задержки (в данном примере: 20s). Второе облако также получает другую внутреннюю линию в горизонтальной »ScaleX (2)» и слегка поворачивается вправо «rotate (5deg)». При этом CSS3 выглядит следующим образом:

#wolke41 {
    position: absolute;
    animation: wolke41 40s infinite linear;
}

@keyframes wolke41 {
    from{transform: scale(2) translate3d(-130px,30px,0)}
    to{transform: scale(1.5) translate3d(670px,30px,0)}
}

#wolke42 {
    position: absolute;
    left: -135px;
    animation: wolke42 40s infinite linear 20s;
}

@keyframes wolke42 {
    from{transform: scaleX(2) translate3d(-30px,50px,0)}
    to{transform: scaleX(2.5) rotate(5deg) translate3d(400px,90px,0)}
}

Но всегда следует иметь в виду: CSS3 анимации работает не во всех браузерах, и поэтому их следует использовать с осторожностью!

Полная анимация облаков

Для моего облака или «tagcloud» я использую для фона градиент от темно-синего до светло-голубого. При этом каждое облако с различными анимациями, соответствует своему собственному «id-Klasse».
Строки в HTMLвыглядят так:

<div id="wolken5">
    <img src="/bilder/wolke.png" alt=""
      width="140" height="167" id="wolke51">
    <img src="/bilder/wolke.png" alt=""
      width="140" height="167" id="wolke52">
    <img src="/bilder/wolkedunkel.png" alt=""
      width="140" height="167" id="wolke53">
    <img src="/bilder/wolkedunkel.png" alt=""
      width="140" height="167" id="wolke54">
    <img src="/bilder/wolkedunkel.png" alt=""
      width="140" height="167" id="wolke55">
    <img src="/bilder/wolke.png" alt=""
      width="140" height="167" id="wolke56">
</div>

И соответствующий CSS3.

#wolken5 {
    position: relative;
    overflow: hidden;
    height: 34em;
    background: linear-gradient(#1f4778,#4584b4);
    border-radius: 30px;
    border: 5px solid #eee;
    box-shadow: 1px 1px 5px 2px #777;
    margin: 2em;
}

#wolke51,
#wolke52,
#wolke53,
#wolke54,
#wolke55,
#wolke56 {
    position: absolute;
}

#wolke51 {
    animation: wolke51 50s infinite linear;
}

@keyframes wolke51 {
    from{transform: scale(2) translate3d(-130px,100px,0)}
    to{transform: scale(1.5) translate3d(670px,100px,0)}
}

#wolke52 {
    left: 435px;
    animation: wolke52 20s infinite linear;
}

@keyframes wolke52 {
    from{transform: scale(.01)}
    to{transform: scale(1.3) rotate(30deg) translate3d(-90px,-130px,0)}
}

#wolke53 {
    animation: wolke53 60s infinite linear;
    z-index: 1;
}

@keyframes wolke53 {
    from{transform: scale(1.3) translate3d(-210px,270px,0)}
    to{transform: scale(1) rotate(10deg) translate3d(720px,120px,0)}
}

#wolke54 {
    animation: wolke55 100s infinite linear;
}

#wolke55 {
    left: -135px;
    animation: wolke55 100s infinite linear 50s;
}

@keyframes wolke55 {
    from{transform: scaleX(7) translate3d(-80px,350px,0)}
    to{transform: scaleX(10) translate3d(130px,350px,0)}
}

#wolke56 {
    left: -135px;
    animation: wolke56 40s infinite linear 20s;
}

@keyframes wolke56 {
    from{transform: scaleX(2) translate3d(-30px,50px,0)}
    to{transform: scaleX(2.5) rotate(5deg) translate3d(400px,-40px,0)}
}

Таким образом, анимация для облаков закончена.

Оригинал / Перевод