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]](https://no-cache.hubspot.com/cta/default/53/07f1f640-9445-4bbc-861d-5b336e8d2e3d.png)
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 |
|
|
|
transition-duration |
Angabe in Sekunden |
|
|
transition-timing-function |
ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier (n,n,n,n) |
|
|
transition-delay |
Angabe in Sekunden |
|
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>
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>
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 |
|
|
|
animation-duration |
Angabe in Sekunden |
|
|
animation-timing-function |
ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier (n,n,n,n) |
|
|
animation-delay |
Angabe in Sekunden |
|
|
animation-iteration-count |
Angabe in Ziffern; bei endlos infinite |
|
|
animation-direction |
normal, reverse, alternate, alternate-reverse |
|
|
animation-fill-mode |
none, forwards, backwards, both |
|
|
animation-play-state |
running, paused |
|
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:
-
Flyout-Menüs
-
Links
-
Buttons
-
Logos
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.
Titelbild: Elena Lukyanova / getty images
