1. Startseite
2. CSS
3. Animationen

Keyframes

Um Animationen in CSS umzusetzen, können wir auf "Keyframes" zurückgreifen.

Mit "Keyframes" reagieren wir nicht auf Ereignisse wie ein "hovern" oder ein "klick" mit der Maus, denn "Keyframes" lösen automatisch den Start der Animation aus und ermöglichen eine kontinuierlich weiche Bewegungen. Um eine Animation mit "Keyframes" auszulösen, muss diese zuerst definiert werden und dann entsprechend aufgerufen werden.

Text animieren

Wir erstellen einen Text, der als Animation in die Seite läuft.

Es soll so aussehen, als wenn der Text gerade getippt wird, dieser Effekt entsteht, wenn wir den Text in Stufen einblenden lassen. Der Text wird über das HTML-Dokument bereitgestellt.

<p id="text">Einfacher Text</p>

Der Text besteht aus 14 Zeichen (Leerzeichen werden mitgezählt). Damit die Stufen (die wir noch bestimmen werden) nicht einen halben Buchstaben wiedergeben, sondern nur vollständige, verwenden wir eine Schriftart, bei der die Buchstaben alle die gleiche Breite haben.

#text {
 font-family: monospace;
}

Um den Text mit "Keyframes" animiert ausgeben zu lassen, definieren wir die entsprechende Regel.

#text {
 font-family: monospace;
 animation: tippen 3s steps(14) forwards;
}

Die Eigenschaft "animation" bekommt als ersten Wert den Namen der Animation. Der zweite Wert bestimmt, wie lange die Animation andauert. Der dritte Wert beschreibt, dass wir (wegen den 14 Zeichen des Textes) die Animation in "14 Steps" abspielen wollen. Der letzte Wert bestimmt die Laufrichtung der Animation. Als Nächstes rufen wir die Animation mit "keyframes" und dem Name der Animation auf.

@keyframes tippen {
 from {
    width: 0;
 }
 to {
    width: 14ch;
 }
}

Der Aufruf der Animation erfolgt erst, nachdem die Animation definiert wurde. Also stehen in CSS die "Keyframes" erst nach dem Element, welches animiert werden soll. Die Deklarationen der Animation beschreibt den Beginn ("from") bei einer Breite von "0", also direkt am Anfang des Textes und das Ende der Animation ("to") bei einer Breite von "14ch", welches kurzgesagt für 14 Zeichen dieser Schriftart steht. Das Ergebnis ist eine Animation von Anfang bis Ende des Textes in 14 Stufen. Leider ist noch keine Animation zu erkennen, weil der Text von Anfang an zu sehen ist, das ändern wir mit der Eigenschaft "overflow".

#text {
 font-family: monospace;
 animation: tippen 3s steps(14) forwards;
 overflow: hidden;
}

Nun wird der Text erst im Laufe der Animation sichtbar. Doch leider wird jedes Wort in einer extra Zeile geschrieben. Mit der Eigenschaft "word-wrap" können wir das Wort wie bei Zeilenumbrüche nach jedem Buchstaben brechen.

#text {
 font-family: monospace;
 animation: tippen 3s steps(14) forwards;
 overflow: hidden;
 word-wrap: break-word;
}

Nun wird jeder Buchstabe in einer extra Zeile geschrieben. Mit der Eigenschaft "white-space" stellen wir alle Buchstaben in eine Reihe und haben jetzt durch die Animation die Illusion, das ein Text auf der Seite getippt wird.

#text {
 font-family: monospace;
 animation: tippen 3s steps(14) forwards;
 overflow: hidden;
 word-wrap: break-word;
 white-space: nowrap;
}