Данная 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)}
}
Таким образом, анимация для облаков закончена.