Seine Webseite zu gestalten, kann man über mehrerlei Wege machen – entweder über Webseiten, die diese Möglichkeit anbieten, oder direkt selbst, zum Beispiel mit CSS Animation. Doch wobei handelt es sich dabei im Einzelnen? Was muss man bei der Programmierung mit CSS Animation beachten? Und Was benötigst Du dafür?

Wofür steht CSS?

Das Kürzel CSS stammt aus dem Webdesign. Es wird als Abkürzung für Cascading Style Sheets genutzt. Gebrauch findet es vor allem in der Codierung von HTML-Dateien – dort fungiert es als Befehl für die Art und Weise, wie eine Webseite mit seinen jeweiligen Inhalten später gestalterisch aufgebaut werden soll.

Zu den Dingen, die man damit festlegen kann, gehören u.a. die Gestaltungen von jeglichen Schrifttypen und -arten, die Farbgestaltung der Seite sowie die Gestaltung von Bildern, Grafiken und ähnlichen Sachverhalten. Das heißt, mit entsprechenden CSS-Codes kannst Du zum Beispiel die Schriftfarbe einer Überschrift von vorne herein genau programmieren. CSS hat neben der Animation außerdem noch andere Bereiche, zum Beispiel CSS Grid oder CSS Flexbox.

Was ist CSS Animation?

Was ist nun CSS Animation? Wie der Zusatz im Titel bereits anklingen lässt, geht es bei CSS Animation darum, die gestalterischen Inhalte einer Webseite innerhalb eines HTML-Codes zu animieren. Dies bewerkstelligt man, indem man alles innerhalb einer sogenannten @keyframe rahmt; diese stellen also eine Art Pfeiler dar, an der Du Dich in der Animation orientieren kannst. Auf diese Weise ist es möglich, mehrere Stufen in der eigentlich Animation festzulegen. Wie welcher Inhalt nun auf welche Weise animiert wird, hängt von den Folgefehlen ab. Sie werden mit animation- angegeben.

Wofür ist CSS Animation gut?

CSS-Animationen verwendet man für die Erstellung von einer Vielzahl von Effekten, darunter:

• der Hover-Effekt: Hierbei handelt es sich um Effekte, die entstehen, wenn ein Benutzer mit der Maus über ein Element auf Deiner Webseite fährt. Zum Beispiel ist es möglich, einen pulsierenden oder wachsenden Effekt erzeugen.
• Übergänge: Du kannst CSS Animationen auch verwenden, um reibungslos zwischen zwei Zuständen zu wechseln. Beispielsweise kannst Du ein Element von seinem normalen Zustand in seinen Hover-Zustand oder von einer Farbe in eine andere überführen.
• Animationen: Um komplexe Animationen zu erstellen, zum Beispiel einen springenden Ball oder ein sich drehendes Rad, eignet sich CSS Animation ebenfalls.

@keyframe und animation

Keyframes stellen einen CSS-Befehl dar, der Animationssequenzen definiert. Er ermöglicht es, bestimmte Elemente auf der Seite in bestimmten Intervallen zu animieren. Der Befehl beginnt mit einem Schlüsselwort (zum Beispiel: „@keyframes myAnimation“) und einem Namen (zum Beispiel: „myAnimation“). Darauf folgt eine Klammer, in der die einzelnen Animationsschritte definiert werden. Jeder Schritt wird wiederum durch ein Schlüsselwort (z.B. „from“ oder „to“) und ein Klammerpaar definiert, in dem die CSS-Eigenschaften des Elements angegeben werden, die sich in diesem Schritt ändern sollen.

Der Befehl @keyframes kann in jedem modernen Browser verwendet werden. Allerdings ist es ratsam, einen Vendor-Prefix (z.B. -webkit- oder -moz-) vorzusehen, um sicherzustellen, dass die Animation auch in älteren Browsern – via Laptops oder anderen Geräten – funktioniert.

Ein einfaches @keyframes-Beispiel wäre unter anderem die Animation eines Kreises, der sich von links nach rechts bewegt. Der Code würde hierbei wie folgt aussehen:

@keyframes myAnimation { 
 from { 
  left: 0px; 
  } 
  to { 
   left: 100px; 
  } 
} 

In diesem Beispiel wird das Element mit der Animationssequenz „myAnimation“ von links nach rechts verschoben. Der Startpunkt der Animation wird durch das Schlüsselwort „from“ definiert, während der Endpunkt durch das Schlüsselwort „to“ bestimmt wird. In beiden Klammern wird lediglich die CSS-Eigenschaft „left“ angegeben, da sich das Element nur horizontal bewegen soll.

Die Animation kann dann mithilfe des CSS-Befehls „animation“ auf ein Element angewendet werden:

#myElement { 
animation: myAnimation 2s linear; 
}

In diesem Beispiel wird die Animationssequenz „myAnimation“ auf das Element mit der ID „myElement“ angewendet. Die Animation wird hierbei 2 Sekunden lang durchgeführt und verläuft linear, das heißt, ohne zusätzliche Interpolationen.

Der CSS-Befehl „animation“ nimmt einige verschiedene Parameter an, die die Animation beeinflussen können. So kann zum Beispiel angegeben werden, wie oft die Animation wiederholt werden soll oder in welchem Tempo sie ablaufen soll. Ein paar der grundlegendsten CSS-Eigenschaften listen wir Dir nun auf.

CSS-Eigenschaften und ihr Einsatz

animation-name

Die Eigenschaft animation-name gibt den Namen der Animation an, der verwendet wird, um die Animation im CSS-Code zu identifizieren.

animation-duration

Diese Eigenschaft legt die Dauer der Animation fest. Sie kann sowohl in Sekunden (s) als auch in Millisekunden (ms) angegeben werden. Die Animation wird für die angegebene Dauer abgespielt, bevor sie an ihr Ende gelangt. Wenn die Animation wiederholt wird, wird sie jedes Mal für die angegebene Dauer wiederholt. Wenn animation-duration nicht angegeben wird, wird die Animation so schnell wie möglich abgespielt.

animation-delay

animation-delay als CSS-Eigenschaft bestimmt, wie lange eine Animation nach dem Start der Seite oder nach dem Start einer anderen Animation anfängt. Sie kann einen Wert in Sekunden (s) oder in Millisekunden (ms) annehmen. Wenn keine Angabe gemacht wird, beginnt die Animation sofort.

animation-iteration-count

Die CSS-Eigenschaft animation-iteration-count legt fest, wie oft eine Animation wiederholt wird. Die Angabe einer ganzen Zahl bedeutet, dass die Animation so oft wiederholt wird, wie angegeben. Die Angabe einer Dezimalzahl hingegen gibt Aufschluss darüber, dass die Animation so oft wiederholt wird, wie angegeben, samt einer weiteren Wiederholung, in der sie rückwärts abläuft. Negative Zahlendrücken in diesem Zusammenhang aus, dass die Animation rückwärts abläuft und dann wieder vorwärts.

Die Standardeinstellung für animation-iteration-count ist 1, was bedeutet, dass die Animation einmal vorwärts abläuft und dann stoppt. Wenn Du die Animation-iteration-count-Eigenschaft auf einen Wert größer als 1 festlegst, wird die Animation so oft wiederholt, wie angegeben. Wenn Du beispielsweise den Wert 5 angibst, wird die Animation fünfmal vorwärts und dann einmal rückwärts abgespielt.

Die Animation-iteration-count-Eigenschaft kann auch als Infinit angegeben werden, was meint, dass die Animation immer wieder wiederholt wird, bis sie vom Benutzer angehalten wird.

animation-direction

In CSS definiert die Eigenschaft animation-direction, ob eine Animation vorwärts, rückwärts oder in abwechselnden Zyklen abgespielt werden soll.

Wenn Du beispielsweise eine zwei Sekunden lange Animation hast, die so eingestellt ist, dass sie vorwärts und dann rückwärts abgespielt wird, meint das: Sie wird insgesamt vier Sekunden lang abgespielt – also zwei Zyklen von jeweils zwei Sekunden. (Wenn die Animation nur einmal abgespielt werden soll, kannst Du die Eigenschaft animation-iteration-count auf 1 setzen.)

Die Eigenschaft animation-direction kann auch auf „normal“, „reverse“ oder „alternate“ gesetzt werden: „normal“ spielt die Animation von Anfang bis Ende vorwärts ab; „reverse“ spielt sie rückwärts ab, Ende bis Anfang; „alternate“ spielt sie vorwärts, dann rückwärts, dann wieder vorwärts usw. ab.

animation-timing-function

animation-timing-function als Eigenschaft legt fest, wie sich eine Animation im Laufe der Zeit verhält. Sie kann einen linearen oder nicht-linearen Verlauf haben. Der lineare Verlauf bedeutet, dass die Animation gleichmäßig von Anfang bis Ende abläuft. Der nicht-lineare Verlauf beschreibt eine ungleichmäßige Animation von Anfang bis Ende.

animation-fill-mode

Die CSS-Eigenschaft animation-fill-mode legt fest, welchen Wert eine animierte CSS-Eigenschaft annehmen soll, wenn die Animation abgeschlossen ist. Insgesamt gibt es vier mögliche Werte für den animation-fill-mode:

• none – der Standardwert. Wenn die Animation abgeschlossen ist, nimmt die animierte Eigenschaft den Wert an, den sie hatte, bevor die Animation gestartet wurde.
• forwards – Nach Abschluss nimmt die Eigenschaft den Wert an, den sie hatte, als die Animation zu Ende lief.
• backwards – Hier nimmt sie den Wert an, den sie besaß, als die Animation begann.
• both – Bei diesem Verlauf nimmt sie sowohl den Wert an, den sie hatte, als die Animation begann, als auch den Wert, den sie hatte, als die Animation zu Ende lief, also forwards und backwards.

animation-play-state

Die CSS-Eigenschaft animation-play-state bestimmt, ob eine Animation ausgeführt oder angehalten wird. Sie findet daher Gebrauch, um eine Animation anzuhalten und/oder fortzusetzen. Die Eigenschaft animation-play-state gibt man als einzelnen Schlüsselwortwert an. Die Schlüsselwortwerte haben folgende Bedeutung:

• running: Die Animation läuft (=Standardwert).
• paused: Die Animation wird angehalten.

Eine Animation kann jederzeit angehalten werden, indem man die Eigenschaft animation-play-state auf „paused“ setzt. Wenn eine Animation angehalten wird, läuft sie nicht weiter und bleibt im aktuellen Zustand, bis sie fortgesetzt wird. Um eine Animation fortzusetzen, setze die Eigenschaft animation-play-state auf „running“. Die Animation wird dort fortgesetzt, wo sie aufgehört hat.

Es ist auch möglich, die Eigenschaft animation-play-state mithilfe der CSS-Eigenschaft animation-timing-function auf einen bestimmten Wert zu setzen. Die Animation beginnt dann, beim angegebenen Wert zu laufen.

Auf einen Blick

Mithilfe von CSS Animation kann man bewegende oder animierte Effekten auf Webseiten innerhalb eines HTML-Codes gestalten. Sie besteht aus zwei Teilen: einem Satz Keyframes (@keyframes) und einem Satz Eigenschaften (animation-…). Die Keyframes rahmen den Start- und Endstatus der Animation, und die Eigenschaften definieren, wie sich die Animation zwischen diesen beiden Punkten bewegen soll.

FAQ zu CSS Animation