Blinkende Buttons, einfliegende Grafiken oder Links, die beim Mouseover ihre Farbe ändern: Für diese Designelemente werden zumeist CSS Animationen verwendet. Welche CSS Animationen es gibt, wie sie funktionieren und wann animierte Elemente auf einer Webseite überhaupt wirklich sinnvoll sind, erfahren Sie in diesem Artikel.

→ Leitfaden CSS & HTML für Anfänger [Kostenloser Download]

Was sind CSS Animationen?

CSS Animationen sorgen dafür, dass ein Element innerhalb eines bestimmten Zeitraums sein Erscheinungsbild verändert. Sie können dabei in verschiedenen Ausführungen auftreten und Eigenschaften wie etwa Hintergrundfarbe, Position oder Größe konfigurieren.

Um eine Animation im CSS zu erstellen, muss zum einen der Style definiert werden, der formatiert werden soll. Zum anderen benötigen Animationen sogenannte Keyframes. Sie bestimmen die Positionen, über die sich die Animation hinweg konfiguriert. Jede Animation benötigt einen Start- sowie einen Endpunkt. Darüber hinaus können weitere Zwischenpositionen definiert werden, welche die Animation durchlaufen soll.

Wann sind CSS Animationen wirklich sinnvoll?

Mit der Weiterentwicklung von CSS3 sind unzählige Möglichkeiten hinzugekommen, Webseiteninhalte zu animieren. Von einfachen Übergängen bis zu lustigen Spielereien ist so gut wie alles auf der eigenen Webseite umsetzbar.

Doch nicht immer sind Animationen sinnvoll, denn sie können schnell für Unübersichtlichkeit sorgen und zu einer schlechten Performance der Webseite führen. Es gibt jedoch Bereiche, in denen Animationen durchaus einen Zweck erfüllen und den Inhalt der Webseite unterstützen.

So kann etwa dort, wo der Besucher visuell auf etwas hingewiesen werden soll, ein animiertes Element als besonderer Blickfang platziert werden. Durch dieses bewusste Lenken der Aufmerksamkeit auf die wichtigen Punkte wird die Seite für den Benutzer leichter navigierbar, was auf seine User Experience (UX) einzahlt. Und: Im Gegensatz zu animierten JavaScript-Elementen schneiden CSS-Konfigurationen in der Performance-Optimierung deutlich besser ab.

Ob ein Nutzer eine Animation tatsächlich sieht, ist jedoch auch von der Aktualität des Browsers abhängig. Damit Ihre Animationen in möglichst vielen Browsern fehlerfrei laufen, können Sie auf sogenannte Präfixe zurückgreifen, die der Animationseigenschaft vorangestellt werden. Die gängigsten Präfixe sind -moz- (für Firefox), -ms- (für Internet Explorer) und -webkit- (für Chrome, Opera und Safari).

Welche Animationen sind mit CSS3 möglich?

Um mit CSS eine Animation zu erstellen, wird dem Element entweder die transition- oder die animation-Eigenschaft (property) hinzugefügt. Zweitere wird dabei für die sogenannten keyframe-Animationen genutzt. Während die transition-Animation sich lediglich zwischen zwei Positionen bewegt, können der keyframe-Animation verschiedene Etappen hinzugefügt werden. Zusätzlich müssen weitere Styles - wie beispielsweise Dauer oder Zeit - deklariert werden, um die Animation entsprechend zu konfigurieren.

Transition und Keyframe-Animation Eigenschaften im Überblick

Die sogenannten transition-Animationen bewegen sich zwischen einem Start- und einem Endpunkt. Die häufigste Anwendung findet mit der pseudo-class „hover“ statt. Bewegt sich der Mauscursor über ein bestimmtes Webseiten-Element, ändert sich das Erscheinungsbild des Elementes. So können beispielsweise Links oder Buttons durch die transition hervorgehoben werden.

Um eine transition anzulegen, werden folgende properties benötigt:

property

values

Bedeutung

transition-property

 
  • Gibt den Namen der CSS-Eigenschaft an, die animiert werden soll

transition-duration

Angabe in Sekunden

  • Gibt die Dauer der Animation an

transition-timing-function

ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier (n,n,n,n)

  • Gibt die Geschwindigkeitskurve der Animation an

transition-delay

Angabe in Sekunden

  • Gibt die Verzögerung der Animation wieder

Beispiel:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 200px;
  height: 300px;
  background: blue;
  transition-property: background;
  transition-duration: 2s;
  transition-timing-function: linear;
  transition-delay: 1s;
}
 
div:hover {
  background: green;
}
</style>
</head>
<body>
 
 
<p>Gehen Sie mit der Maus über das Rechteck, um die transition zu sehen.</p>
 
<div>
</div>
 
</body>
</html>

 

So nutzen Sie CSS Animationen

Bild: Screenshot von w3schools.com

Keyframe-Animationen besitzen im Gegensatz zu den transitions mehrere Zwischenpositionen. Diese sogenannten keyframes beinhalten das Erscheinungsbild des Elementes zum jeweiligen Zeitpunkt der Animation. Keyframe-Animationen sind nicht an bestimmte Handlungen oder Bewegungen des Users auf der Webseite gebunden. Stattdessen werden sie durch das Laden der Seite initiiert. Eine keyframe-Animation besteht immer aus der @keyframes-Regel sowie den Darstellungseigenschaften.

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 100px;
  height: 100px;
  background-color: blue;
  animation-name: NAME;
  animation-duration: 4s;
}
 
  @keyframes NAME {
0% {background-color: blue;}
50% {background-color: green;}
100% {background-color: orange;}
}
</style>
</head>
<body>
 
<p><b>Das Quadrat ändert durch die CSS Animation seine Farbe. </p>
 
<div></div>
 
 
</body>
</html>
 

So nutzen Sie CSS Animationen 2

Bild: Screenshot von w3schools.com

Das Beispiel zeigt, dass die @keyframes-Regel den Namen sowie den Ablauf der Animation beinhaltet. Es werden die einzelnen Positionen sowie Eigenschaften der Positionen definiert. Die keyframes werden dabei in Prozent angeben. Die Startposition kann sowohl mit 0 % als auch mit der Bezeichnung „from“ deklariert werden. Das Ende der Animation wird entsprechend mit 100 % oder „to“ angegeben. Angewendet wird die Animation auf das div-Element.

Der keyframe-Animation können dabei folgende Eigenschaften hinzugefügt werden:

property

values

Bedeutung

animation-name

 
  • Name der Animation
  • Muss zugeordnet werden, sonst kann keine Animation ausgespielt werden

animation-duration

Angabe in Sekunden

  • Dauer der Animation
  • Muss unbedingt gesetzt werden, da der Wert ansonsten null ist und keine Animation ausgegeben wird

animation-timing-function

ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier (n,n,n,n)

  • Gibt die Beschleunigungskurven zwischen den einzelnen Keyframes an

animation-delay

Angabe in Sekunden

  • Gibt an, wann Animation starten soll

animation-iteration-count

Angabe in Ziffern; bei endlos infinite

  • Gibt an, wie oft Animation wiederholt wird
  • Standardwert 1

animation-direction

normal, reverse, alternate, alternate-reverse

  • Gibt an, ob Animation die Richtung wechselt

animation-fill-mode

none, forwards, backwards, both

  • Gibt an, welcher Style auf das Element nach der Animation angewendet wird

animation-play-state 

running, paused

  • Pausieren oder Wiederaufnehmen einer Animationsposition

Platz sparen durch Kurzformen

Sowohl transitions als auch keyframe-Animationen können in einer Kurzform geschrieben werden, um den CSS-Code schlank zu halten.

Die Kurzschreibweise für transitions:

transition: [transition-property][transition-duration][transition-timing-function][transition-delay];

Die Kurzschreibweise für keyframe-animations:

animation: [animation-name][animation-duration][animation-timing-function][animation-delay][animation-iteration-count][animation-direction][animation-fill-mode][animation-play-state];

Praktische CSS-Animations-Beispiele

Animationen können auf vielfältige Art und Weise eingesetzt werden. Dabei stechen praktische Anwendungsbeispiele dadurch heraus, dass das animierte Element einen Mehrwert bietet. So werden beispielsweise Onepager häufig mit Animationen untermalt, um einen Wow-Effekt zu erzeugen und ein noch intensiveres Nutzererlebnis zu kreieren.

Darüber hinaus finden Animationen auch oft bei folgenden Elementen Anwendung:

Die Animation zeigt beispielsweise an, ob das Element anklickbar ist oder bereits angeklickt wurde. Buttons oder Calls-to-Action können außerdem animiert werden, um die Aufmerksamkeit des Nutzers auf sich zu ziehen.

Anwendungsbereiche von CSS Animationen sind vielfältig

Während Sie mit transitions einfache Design-Wechsel eines Elementes erzeugen können, helfen Ihnen keyframe-Animationen einen tollen Blickfang auf Ihrer Webseite zu erzeugen. Achten Sie jedoch stets darauf, Ihre Seite nicht mit Animationen zu überladen, um die Performance sowie Usability nicht zu gefährden.

css html für anfängerTitelbild: Elena Lukyanova / getty images

Ursprünglich veröffentlicht am Jul 8, 2020 2:00:00 AM, aktualisiert am Januar 19 2023

Themen:

CSS Grundlagen