Animationen sind im Webdesign wahrlich kein neues Konzept. Vor CSS3 waren Flash und JavaScript die bevorzugten Werkzeuge, um Gegenstände und Elemente auf einem Bildschirm lebhaft in Bewegung zu setzen. Animationen sind ein wirkliches UX-Vergnügen.

Animationen können die User Experience einer Seite deutlich aufwerten. Das liegt daran, dass wir Menschen dazu neigen, besser mit dynamischen Umgebungen zu interagieren. Animationen verleihen einem Internetauftritt auch Individualität und Persönlichkeit. Ich persönlich finde es interessanter, auf einer Seite mit animierten Ladevorgängen zu warten, als auf einer Seite mit dem standardmäßigen faden und statischen Ladebildschirm.

Was sind Animationen

CSS-Animationen sind Veränderungen, Bewegungen, Kontinuität und Aktionen von Elementen auf einer Webseite. Sie machen eine Seite dynamischer und lebendiger. Mit Übergängen in CSS kann man doch bereits Bewegungen und Änderungen auf einer Webseite vornehmen, warum brauchen wir also Animationen?

1. Animationen erlauben es dir, mehr Kontrolle über den Prozess zu gewinnen.
2. Sie sind flexibel und dynamisch.
3. Übergänge sind für einfache Änderungen gedacht, während Änderungen in Animationen komplexer sein können.
4. Übergänge können nicht die Eigenschaften ändern, die an sie geknüpft sind; sie definieren nur ihre Aktionen. Animationen können CSS-Eigenschaften und Werte innerhalb der Keyframes ändern.
5. Übergänge sind an drei verschiedene Zustände gebunden - Start, Ende und Dauer. Animationen sind frei von der Abhängigkeit von irgendeinem Zustand - sie können jederzeit ins Spiel kommen.
6. Animationen können Schleifen bilden, während Übergänge dies nicht können.

HINWEIS: Für Animationen musst du mehr Code schreiben als für Übergänge. Wenn du also einfach nur eine simple Bewegung oder Aktion in deine Website einbinden willst, solltest du am besten mit Übergängen arbeiten.

Vorteile von CSS-Animationen gegenüber Flash, Videos und JavaScript

Flash (bevor es eingestellt wurde) und JavaScript waren bei der Erstellung von Animationen sehr beliebt. Heute ersetzen die Leute auch Videos und Gifs durch animierte Abschnitte. Warum ist es notwendig, Animationen anstelle dieser anderen Optionen zu verwenden?

1. Das Erstellen von CSS-Animationen erfordert nur Kenntnisse in CSS. Das Schreiben von Animationscode mit JavaScript erfordert einige Erfahrung in dieser Programmiersprache.
2. Animationen müssen, im Gegensatz zu Videos, nicht extern geladen werden. Sie laufen direkt im Browser, verkürzen die gesamte Ladezeit, sind kompatibler und haben eine bessere Reaktivität.
3. Browser ohne aktiviertes JavaScript können keinen JavaScript-Code ausführen.
4. Der Browser steuert den Animationsprozess und sorgt so für eine optimale Performance und einen reibungslosen Ablauf.

Die Grundlagen der Animationen

Animationen benötigen nur drei grundlegende Dinge

• Keyframes: Sie definieren den Stil oder das Aussehen des Elements und müssen definiert werden.
• Eigenschaften: Dies sind die Animationseigenschaften, die an das Keyframe angehängt werden
• Eine Dauer: Die Dauer des gesamten Prozesses

Eigenschaften von Animationen und @keyframes

Einige der Eigenschaften von Animationen sind:

• Animation-name: Hier wird der Name der @keyframes-Animation definiert. Dieser Name ist wie eine Variable. Es ist dem Entwickler überlassen, ihn anzugeben.
• Animation-duration: Hier wird die Zeit definiert, die die Animation benötigt, um einen Zyklus abzuschließen. Die Angabe einer Dauer ist wichtig, denn wenn sie nicht festgelegt ist, wird keine Animation stattfinden. Die Animation braucht einen Zeitrahmen. Der Wert dafür ist eine ganze Zahl in Sekunden, und der Min-Wert ist 0s.
• Animation-delay: Die Zeitverzögerung zwischen der Elementladezeit und dem Beginn der Animationssequenz.
• Animation-timing-function: Hiermit wird die Zeit oder Geschwindigkeit definiert, mit der die Animation von einem Stil oder Zustand in einen anderen wechselt. Sie hat die Werte als Übergangs-Timing-Funktion - linear, ease-in, ease-out, step-start, step-end und cubic-bezier.
• Animation-iteration-count: Hier wird festgelegt, wie oft eine Animation wiederholt werden soll.
• Animation-fill-mode: Hier werden Werte oder Stile definiert, die von der Animation vor Beginn der Sequenz, nach ihrem Ende oder beidem ausgeführt werden. Es werden Werte wie vorwärts und rückwärts genommen.
• Animation-play-state: Hier wird definiert, ob eine Animation läuft oder pausiert, und User haben den Luxus, diese Aktion zu kontrollieren. Wenn ein User zum Beispiel über eine laufende Animation schwebt, pausiert sie.
• Animation-direction: Hiermit wird die Richtung der Animation festgelegt. Rechts, links oder abwechselnd.

Kurzschreibweise von Animationen

Animation ist die Kurzform aller anderen bereits aufgeführten Sub-Eigenschaften.

Wie es funktioniert

Sobald ein Keyframe definiert ist, wird die Animationssequenz in Prozent konfiguriert, um den Start- und Endfortschritt der Animation festzulegen. 0% ist normalerweise der Startwert und 100% das Ende. Du kannst diese beiden mit from und to ersetzen. Zwischen 0 und 100 können Zwischenstufen angegeben werden, wie 25%, 68%, usw., die dem Browser sagen, was er bei jeder Stufe tun soll.
Du kannst mehrere Animationen und Keyframes für ein Element schreiben und diese durch ein Komma trennen. Ich werde euch anhand verschiedener Demos zeigen, wie ihr CSS-Animationen auf vielfältige Weise nutzen könnt.

Einfache Animation einer rollenden Kugel

In der folgenden einfachen Demo habe ich eine rollende Kugel animiert, die in verschiedenen Stadien die Hintergrundfarbe wechselt und während des Wegs von einer Kugel zu einem Quadrat wird. Die Animationseigenschaften in dieser dynamischen Design-Demo sind Animation-name, Animation-timing-function, Animation-duration und Animation-iteration-count, in dieser Reihenfolge.

<html>
  <body>
    <div></div>
  </body>
</html>

div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: absolute;
  border-radius: 50%;
  animation: rollingball linear 2s infinite;
} 
@keyframes rollingball {
  0% { 
    left: 0px;
  } 
  25% { 
    background: purple;
    border-radius: 0;
  } 
  75%{ 
    background: orange;
  } 
  100% { 
    background: green;
    left: 300px;
  } 
}

In dieser Demo bewegt sich der Ball nur in die rechte Richtung. Wenn er 300px zurückgelegt hat, bewegt er sich zurück zum Startpunkt 0px und fängt wieder von vorne an. Diese Bewegung sieht nicht schön aus. Aber nach dem Hinzufügen in Animation-direction mit wechselndem Wert, bewegt sich der Ball schön vorwärts und rückwärts und fährt mit dieser Schleife fort.

animation: rollingball linear 2s infinite alternate;

Animation von Texten

In dieser Demo werden wir einen reflektierenden blinkenden Text erstellen, der bei 50% verblasst.

<h3>69 beep</h3>

@keyframes text-blink {
  50% {
    opacity: 0;
  }
}
h3 { 
  animation: text-blink 15s ease infinite; 
  font-family: 'Georgia', serif; 
  font-size: 7em; 
  text-align: center; 
  background: -webkit-linear-gradient(90deg, red 45%, green 58%); 
  -webkit-background-clip: text; 
  -webkit-text-fill-color: transparent; 
  -webkit-box-reflect: below 2px -webkit-gradient(linear, right top, right bottom, from(transparent), to(rgba(255, 255, 255, 0.4)));   
}

Um diese Animation anzuhalten, benutze ich den Animation-play-state. Dieser Effekt tritt ein, wenn ich mit der Maus über den Text fahre. Der gleiche Effekt kann auch auf die Animation der rollenden Kugel angewendet werden.

h3:hover{ 
  animation-play-state: paused; 
}

Animation von Hintergrundfarben

<div></div>

div {
  width: 100%;
  height: 100%;
  animation: color 5s infinite;
}
@keyframes color {
  0% {
    background-color: orange;
  }
  50% {
    background-color: pink;
  }
  100% {
    background-color: yellow;
  }
}

Animation von Kugeln mit Verzögerung

Ich habe in dieser Demo die Animation von drei fallenden/springenden Kugeln simuliert. Dabei hat jede eine bestimmte Zeitverzögerung.

<div class="container">
  <div id="ball1" class="ball"> </div>
  <div id="ball2" class="ball"> </div>
  <div id="ball3" class="ball"> </div>
</div>

@-webkit-keyframes bouncingball { 
  0%   {transform: translateY(10px);} 
  50%  {transform: translateY(150px);} 
  100% {transform: translateY(2px);} 
} 
.container{ 
  background-color: #000; 
  height:220px; 
} 
.ball{ 
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: inline-block;
  margin: 20px;
}
#ball1{ 
  -webkit-animation: bouncingball 8s ease-out infinite; 
  background: red; 
} 
#ball2{ 
  -webkit-animation: bouncingball 4.3s linear infinite; 
  background: yellow; 
} 
#ball3{ 
  -webkit-animation: bouncingball 5.5s linear infinite; 
  background: green; 
}

Animation von Bildern

In dieser Demo kannst du einen einfachen Effekt sehen, bei dem von oben auf ein Bild gezoomt wird

<img class="img" src="https://www.gettyimages.com/gi-resources/images/500px/983794168.jpg" />

@keyframes animatedimg { 
  0% { 
    transform: scale(1) translateY(0); 
    transform-origin: 50% 16%; 
  } 
  100% { 
    transform: scale(1.25) translateY(-15px); 
    transform-origin: top; 
  } 
} 
.img {
  animation: animatedimg 5s ease-out both; 
}

Viele Effekte könnten auf beliebige Eigenschaften angewendet werden. Die nächste Demo dreht und skaliert ein Bild und konzentriert sich stark auf die Transformationseigenschaften

<img class="rotate-and-scale" src="https://www.gettyimages.com/gi-resources/images/500px/983794168.jpg" />

@keyframes rotate-scale { 
  0% { 
    transform: scale(1) rotateZ(0); 
  } 
  50% { 
    transform: scale(2) rotateZ(180deg); 
  } 
  100% { 
    transform: scale(1) rotateZ(360deg); 
  } 
} 
.rotate-and-scale { 
  animation: rotate-scale 0.65s linear both; 
  width: 300px;
}

Animation von flexbox

Du kannst Animationen für Layouteigenschaften, also auch grid und flexbox, verwenden. Diese Demo lässt eine flexbox um 5 Punkte wachsen.

<div class="containerbox">
  <div class="box">Box 1</div>
  <div class="box2">Box 2</div>
  <div class="box">Box 3</div>
</div>

.containerbox { 
  height: 300px; 
  border: 1px solid black; 
  display: flex; 
} 
.box { 
  font: 16px; 
  background: pink; 
  flex-grow: 1; 
}
.box2 { 
  background: orange; 
  animation: flexanimation 1s ease-out 1s 5 alternate backwards; 
}
@keyframes flexanimation { 
  100% { 
    flex-grow: 5; 
  }
}

Einfache Text-Ladeanimationen

Statt des traditionellen Kreisels, der beim Laden gezeigt wird, werden immer mehr Entwickler kreativ, wenn es darum geht, Objekte während des Ladens anzuzeigen. Einige dekorieren den sich drehenden Kreis neu, andere verwenden animierten Text und Bilder.
In dieser Demo habe ich einen pulsierenden Text erstellt, der anstelle des sich drehenden Kreises angezeigt wird.

CodeCodaBlog

<h1 class="loader-text">CodeCodaBlog</h1>

.loader-text { 
  text-shadow: 2px 1px 5px grey; 
  font-size: 4em; 
  text-align: center; 
  animation: pulsate 0.5s ease-in-out infinite both; 
} 
@keyframes pulsate { 
  0% { 
    transform: scale(1); 
  } 
  50% { 
    transform: scale(0.9); 
    color:blue; 
  } 
  100% { 
    transform: scale(1); 
    color: grey; 
  } 
}

Wir könnten einen Timer und eine onload-Funktion mit ein wenig JavaScript einrichten und den User nach Abschluss des Ladevorgangs auf die nächste Seite bringen.

Ein paar Hinweise zur Verwendung von Animationen

• Versuche, nicht zu viele von ihnen zu benutzen. Sie können recht schnell für Probleme auf deiner Website sorgen.
• Der Browser kann nicht mit zu vielen CSS-Verzögerungen umgehen. Wenn du mehr als drei Sequenzen laufen hast, die miteinander verflochten sind, ist es am besten, JavaScript zu verwenden.
• Wähle Animationssequenzen mit Bedacht aus. Einige Browser unterstützen manche Sequenzen nicht.

Abschließende Worte

Das Erstellen von Animationen macht wirklich Spaß und ist in einem Browser implementiert. Die Vorteile von Animationen sind zahlreich, und die Bandbreite ihrer Möglichkeiten schier endlos. Sie sind seit 2011 ein Teil von CSS3. Obwohl die neuesten Versionen einiger moderner Browser sie unterstützen, benötigen sie immer noch Hersteller-Präfixe, damit ältere Browser und Versionen sie korrekt anzeigen können.
Nicht alle Eigenschaften sind Gegenstand von Animatable. Eine vollständige Liste der animierbaren Eigenschaften findest du hier bei MDN.
Die Arbeit mit CSS-Animationen kann eine Weile dauern, bis man sie beherrscht. Ich rate dir daher, zunächst mit ihnen etwas herumzuspielen, deiner Fantasie freien Lauf zu lassen und zu sehen, was funktioniert und was nicht. Wenn du mehr Fähigkeiten und Erfahrungen mit CSS-Animationen sammelst, wirst du irgendwann mehr Schwung und Interaktivität in deine Web-Tools bringen und das dynamische Design effektiv nutzen, um die Surferfahrung deiner User zu verbessern.