Simple CSS Animation

Zum start der Deutschen Sommerferien zeige ich wie man eine sehr Simple aber trotzdem beeindruckende CSS Animation bauen kann

Sommer Zeit ist Urlaubszeit

 
Flugzeug

(Klicke auf das Flugzeug)

Wie bei allen, was ich für Webseiten Schreibe, lege ich, großen Wert darauf das sowenig wie möglichst an Dateien vom Browser geladen werden müssen. Wie in dieser Animation schön zu sehen ist, besteht sie nur aus zwei Bildern und einem SVG das vom Browser beim Pasen erstellt wird. So werden nicht einmal 100KB vom Browser geladen, was ein schnelles Laden der Seite gewährleistet.

Die Grafiken

  1. Als allererstes habe ich die Weltkarte von Wikipedia als SVG gespeichert und in Affinity Designer auf meine benötigte Größe angepasst ( 1405x601px ) und die Füllfarbe in Weiß geändert.
  2. Auf einer neuen Ebene legte ich eine Pixelebene an und zeichnete mit einem Pulver Pinsel (im Affinity Store), die Wolken so wie ich sie haben wollte.
  3. In Affinity Photo stellte ich ein Bild von einem Flugzeug frei und passte die Größe an. Mit einem Filter Effekt wurde noch ein Schlagschatten erzeugt und das Bild mit transparenten Hintergrund als PNG abgespeichert.

Um Ladezeiten zu reduzieren, kann man seine Bilder/Fotos noch verlustfrei Komprimieren und von den Meta-Daten befreien. Hierzu Verwende ich in WordPress das Optimus Plugin oder die Webseite TinyPNG.com.

Das Erstellen der Animation im Editor

Für die Welt wird ein DIV erzeugt das über CSS die Gestaltung bekommt. Für den Hintergrund dient ein linear-gradient() und die Kontinente werden als background-image geladen und um das Flugzeug separat in der Größe ändern zu können wird dieses mit einem img-tag geladen. Jetzt fehlen nur noch die Wolken! Man könnte die Wolken noch als 2. background-image überlagernd laden aber bedenke der Himmel und die Erde bewegen sich nicht in der gleichen Geschwindigkeit. Daher habe ich mich für die Variante entschieden, die Wolken mit einer Pseudo-Klasse zu erzeugen. Das bringt dem Vorteil, das ich beide Bilder separat voneinander ansprechen kann.

   <div id="earth">
      <img src="//www.frederikkohler.de/wp-content/uploads/2020/07/flugzeug.png" alt="Flugzeug" />
   </div>

CSS

Ein einfacher Weg zum Ziel mit @keyframes für unsere Animation. Das SVG der Weltkarte hat eine Größe von 1405x601px aber die Weltkugel wird im HTML nur mit 200px erstellt. Das heißt, unsere Welt ist viel zu klein für unser Bild! Mit background-cover können wir dem Bild sagen, dass es sich an die Größe des Containers automatisch anpassen soll und mit dem Befehl background-position, können wir die Position gut ändern. Aber da unser Bild sich automatisch anpasst, müssen wir erst die aktuelle Größe herausfinden, dass wir bei der Animation auch einen flüssigen Übergang bekommen. Würden wir jetzt einfach einen @keyframe schreiben und das Bild in der Position verändern, würde die Animation ca. in der Hälfte stoppen und von vorne beginnen, weil wir der Animation ja mitteilen müssen wo das Bild Anfangen soll und wo Enden, weil wir es ja nur verschieben wollen. Da hilft und die CSS Rechen funktion! Unser Bild weißt eine Originalhöhe von 601px auf aber wird 200px angepasst. Mit dem Dreisatz calc(1405 / 601 * 200) berechnen wir die neue Breite des Bildes und der Rückgabewert ist automatisch das Ende unserer Animation. Also wir wissen das unser Bild nur eine Breite von 467,55px hat, wenn die Position dann am Anfang der Animation (0 %) auf null steht, wollen wir die Position am Ende (100 %) dann um diese 467,55px verschieben. Dann nur noch die Animation endlos wiederholen lassen mit infinite.

Ich habe noch zusätzlich die Animation kopiert und für die Wolken eine Sekunde verlangsamt um eine Trennung der Geschwindigkeit zwischen Wolken und Erde hinzubekommen.

#earth {
  height: 200px;
  width: 200px;
  position: relative;
  background: #1552e3;
  background-image: url(' {path_flugzeug_image} '),
    linear-gradient(0deg, #273963, #6870c4);
  background-size: cover;
  background-position: 0px 0px;
  border-radius: 50%;
  box-shadow: inset 0 0 50px rgb(0, 0, 0, 0.85),
    inset 0 0 0px rgba(255, 255, 255, 0.85);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.5s;
  animation: welt-rotation 12s linear infinite;
  z-index: 10;
}

#earth::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 50%;
  background-image: url(' {path_wolken_image} ');
  background-size: cover;
  background-position: 0 0;
  animation: wolken-rotation 11s linear infinite;
  z-index: 50;
}

@keyframes welt-rotation { 
0% { background-position: 0 0; } 
100% { background-position: calc(1405px / 601 * 200) 0; } 
}
@keyframes wolken-rotation { 
0% { background-position: 0 0; } 
100% { background-position: calc(1405px / 601 * 200) 0; } 
}

#earth:active {
  transition: 0.5s;
  transform: scale(5);
}

#earth:active img {
  transform: scale(0.5);
}

#earth img {
  pointer-events: none;
}

Um es selbst auszuprobieren, stelle ich die hier die Bild-Dateien und die HTML/CSS Codes zum Download bereit. Viel Spaß beim Nachbauen!