CSS3-Animation mit mehreren Wolken vor einem Hintergrund mit Farbverlauf

  1. Zum Inhalt springen

webdesign
klamonfra
Klaus Franz


animierte Wolke 61 animierte Wolke 63 animierte Wolke 64 animierte Wolke 65 animierte Wolke 66

Wie fliegen Wolken an einem Hintergrund mit Farbverlauf vorbei?

16Aug2014

CSS3-Animation mit mehreren Wolken


So eine CSS3 (Cascading Style Sheet)-Animation wird mit @keyframes-Regeln erstellt. Eine Wolke, wie in diesem Beispiel, durchläuft in einer festgelegten Zeit verschiedene Zustände oder Schlüsselbilder, die sogenannten Keyframes. Jedem Bild können dabei unterschiedliche Eigenschaften, wie Größe oder Position, zugewiesen werden.
Im einfachsten Fall entsteht eine Animation durch zwei Keyframes. Eine Wolke bewegt sich, wie in der unteren Animation nach dem Laden der Seite, innerhalb von 20 Sekunden von Punkt A zu Punkt B und wird dabei langsam kleiner.

animierte Wolke

Das HTML (HyperText Markup Language) ist relativ einfach aufgebaut.

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

Und das zugehörige CSS3 (Cascading Style Sheet).

#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)}
}

Das "overflow: hidden" im "div-Container" wird dafür benötigt, dass sich die Wolke nur innerhalb des Rahmens zeigt. Das Bild in dem "div-Container" ruft dann die "@keyframes-Regel" mit dem Namen "wolken11" auf, legt die Dauer der Animation auf 20 Sekunden fest, die Anzahl der Wiederholungen ist unbegrenzt (infinite) und bewegt sich linear.
Die verschiedenen Möglichkeiten der zeitlichen Verlaufs-Funktion sind unter "Darstellung der verschiedenen zeitlichen Funktionen bei der Transition" aufgeführt.

Die einzelnen Schritte der "@keyframes-Regel" werden dabei in Prozent angegeben, wobei für 0% und 100% auch "from" und "to" verwendet werden kann. Die Prozentangaben sind dabei in Relation zur angegebenen Dauer zu sehen.
Die Wolke wird beim Start auf die anderthalbfache Größe "transform: scale(1.5)" gestellt und hat am Ende der Animation die normale Ausdehnung erreicht. Mit der Angabe "translate3d (x,y,z)" wird die Richtung der Bewegung festgelegt, wobei der erste Wert für die Horizontal-Richtung, der zweite für die Vertikal-Richtung und der dritte für die Tiefe steht. Die 3D-Transformationen haben dabei den großen Vorteil, dass sie von der Grafikkarte berechnet werden und daher etwas flüssiger ablaufen als zum Beispiel mit der Angabe "left"! Im unteren Beispiel kann man den Unterschied eventuell sehen. Die obere Wolke wird wie im ersten Beispiel mit "translate3d" animiert und die untere Wolke durch die folgende Angabe im CSS3 (Cascading Style Sheet).

#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)}
}
animierte Wolke mit translate3d animierte Wolke mit left

Im nächsten Beispiel sind drei Schritte definiert, wobei zusätzlich noch die CSS (Cascading Style Sheet)-Eigenschaft für die Transparenz aufgeführt ist und die vertikale Richtung nach der Hälfte der Zeit verändert wird. Die veränderten CSS3 (Cascading Style Sheet)-Zeilen zum ersten Beispiel sehen dabei wie folgt aus.

@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)}
}
animierte Wolke

Für meine Schlagwortwolke benötige ich aber mehrere Wolken und diese sollen außerdem noch zeitlich versetzt ablaufen.
Als erstes muss hierfür der "div-Container" mit "position: relative" versehen werden, damit man die einzelnen Wolken durch die Angabe "position: absolute" entsprechend positionieren kann. Und da die zweite Wolke erst nach 20 Sekunden mit der Animation beginnt, muss man mit "left: 135px" dafür sorgen, dass die Wolke zuerst aus dem Sichtfeld des Containers gesetzt wird.
Für die zeitliche Versetzung genügt dann eine zweite Zeitangabe im Animationsaufruf (im diesem Beispiel: 20s). Die zweite Wolke erhält außerdem noch eine Ausdehnung in der Horizontalen "transform: scaleX(2)" und wird leicht nach rechts "rotate (5deg)" gedreht. Damit sieht das CSS3 (Cascading Style Sheet) wie folgt aus:

#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)}
}
Erste animierte Wolke Zweite animierte Wolke

Aber eins sollte man bei diesen Animationen immer bedenken: CSS3 (Cascading Style Sheet)-Animationen laufen nicht auf allen Browsern ab, und sollten daher mit Bedacht eingesetzt werden!


Die komplette Wolkenanimation

Für meine Tag-Cloud oder Schlagwortwolke benutze ich für den Hintergrund einen Farbverlauf von dunkelblau zu hellblau. Dazu verschiedene Wolken mit unterschiedlichen Animationen die jeweils mit einer eigenen "id-Klasse" angesprochen werden.
Die Zeilen in HTML (HyperText Markup Language) sehen dabei wie folgt aus:

<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>

Und das zugehörige CSS3 (Cascading Style Sheet).

#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)}
}

Damit ist die Wolkenanimation für die Tag-Cloud fertig erstellt.

animierte Wolke 51 animierte Wolke 52 animierte Wolke 53 animierte Wolke 54 animierte Wolke 55 animierte Wolke 56

Und wie eine Tag-Cloud aufgebaut wird, ist im nächsten Artikel zu erfahren.

Zum Seitenanfang springen Λ