CSS-Animationen werden mittlerweile von allen modernen Browsern unterstützt und ersetzen daher in vielen Bereichen Effekte, die einst nur über JavaScript realisiert werden konnten. Neben den sog. CSS-Transitions sind vor allem die CSS-Keyframe-Animationen interessant. Mit Keyframe-Animationen können komplexe Animationsabläufe über sog. Schlüsselbilder (keyframes) erzeugt werden. Im Gegensatz zu Transitions, die eine Interaktion des Users voraussetzen, können Keyframe-Animationen auch selbstständig ablaufen.
Die Syntax
Eine Keyframe-Animation wird in zwei Teilen aufgebaut. Mit der @keyframes-Regel wird bestimmt, wie die Animation heißen soll, welche Schlüsselbilder es in der Animation gibt und welche CSS-Eigenschaften animiert werden sollen. Die simpelste Keyframe-Animation besteht aus zwei Schlüsselbildern, für den Beginn und das Ende der Animation.
@keyframes meine-animation {
from {
/* Eigenschaften zum Beginn der Animation */
}
to {
/* Eigenschaften zum Ende der Animation */
}
}
.mein-selektor {
animation-name: meine-animation;
animation-duration: 2s;
animation-iteration-count: infinite;
/* weitere animation-Eigenschaften */
}
Der zweite Teil der Animation wird im Selektor des Objekts, das animiert werden soll notiert. Dazu existieren die animation-Eigenschaften in CSS:
animation-name (Pflichtangabe)
Über die Eigenschaft animation-name definiert man welche Keyframes verwendet werden sollen. Es muss der in der @keyframes-Regel verwendete Name angegeben werden.
animation-duration (Pflichtangabe)
Mit animation-duration wird in Sekunden festgelegt wie lange die Animation dauern soll.
animation-iteration-count (Pflichtangabe)
Mit der Eigenschaft animation-iteration-count wird bestimmt wie oft die Animation ablaufen soll. Mögliche Werte sind das Schlüsselwort infinite für unendliche viele Wiederholungen. Ansonsten kann ein beliebiger Zahlwert angegeben werden.
Beispiel anschauen
animation-timing-function
Mit animation-timing-function wird bestimmt, wie die Animationskurve aussehen soll. Hier existieren die Schlüsselbegriffe ease, steps(<integer>, start), steps(<integer>, end), linear, ease-out, ease-in-out, ease-in für bereits vordefinierte Animationskurven. Wenn eine eigene Kurve verwendet werden soll, kann sie über ein Tool erzeugt und schließend in form von cubic-bezier(<number>, <number>, <number>, <number>) eingefügt werden. Der Standard-Wert ist ease.
Beispiel anschauen
animation-delay
Mit animation-delay wird eine Verzögerung der Animation in Sekunden festgelegt.
Beispiel anschauen
animation-direction
Mit animation-direction kann die Richtung der Animation festgelegt werden. Mögliche Werte sind normal, reverse (die Animation wird rückwärts abgespielt), alternate-reverse (die Animation wird bei jedem ungeraden Durchlauf rückwärts abgespielt) und alternate (die Animation wird bei jedem geraden Durchlauf rückwärts abgespielt).
Beispiel anschauen
animation-fill-mode
Mit animation-fill-mode wird festgelegt, wie das Objekt sich verhalten soll, wenn die Animation gerade nicht läuft. Beispielsweise weil über animation-delay eine Verzögerung eingestellt wurde oder die Animation bereits abgelaufen ist. Es sind folgende Werte erlaubt: none, forwards (Zustand zum Ende der Animation), backwards (Zustand zum Beginn der Animation), both (kombinierte Werte aus dem Beginn und dem Ende der Navigation)
animation-play-state
Mit animation-play-state wird festgelegt ob die Animation abgespielt wird oder pausiert. Mit dem Wert running wird die Animation abgespielt, mit paused pausiert. Dies macht in Kombination mit Mouse-Over-Effekten oder JavaScript Sinn.
Beispiel anschauen
Kurzschreibweise
Die Kurzschreibweise für die oben genannten animation-Eigenschaften lautet animation. Die Werte müssen in folgender Reihenfolge angegeben werden.
.selektor {
animation: [animation-name] [animation-duration] [animation-timing-function] [animation-delay] [animation-iteration-count] [animation-direction] [animation-fill-mode] [animation-play-state]
}
Komplexe Animationen
Innerhalb der @keyframes-Regel können beliebig viele Schlüsselbilder angegeben werden. Wenn es mehr als zwei sind, wird die Position auf der Zeitleiste in Prozent angegeben.
@keyframes meine-animation {
0% {
/* Eigenschaften zum Beginn der Animation */
}
50% {
/* Eigenschaften nach der Hälfte der Animation */
}
100% {
/* Eigenschaften zum Ende der Animation */
}
}
Es können auch Werte zusammengefasst werden.
@keyframes meine-animation {
0% {
/* Eigenschaften zum Beginn der Animation */
}
25%, 75% {
/* Eigenschaften von 1/4 bis 3/4 der Animation */
}
100% {
/* Eigenschaften zum Ende der Animation */
}
}
Beispiel 1: Objekte bewegen und Farbe wechseln
Das folgende Beispiel zeigt, wie eine Keyframe-Animation aufgebaut sein kann. Wir bewegen einen <div> zwischen vier Koordinaten und wechseln zusätzlich die Farbe.
<div class="mein-element"></div>
.mein-element {
height:120px;
width:120px;
background:silver;
border-radius: 100%;
position: absolute;
animation-name:meine-animation;
animation-duration:4s;
animation-iteration-count:infinite;
}
@keyframes meine-animation {
0%, 100% {
background-color:red;
top:50px;
left:50px;
}
25% {
background-color:gold;
top:50px;
left:600px;
}
50% {
background-color:lime;
top:600px;
left:600px;
}
75% {
background-color: blue;
top:600px;
left:50px;
}
}
Beispiel anschauen
Mit weiteren Elementen und der animation-delay-Eigenschaft, kann der Effekt noch ansprechender gestaltet werden:
<div class="mein-element"></div>
<div class="mein-element"></div>
<div class="mein-element"></div>
<div class="mein-element"></div>
.mein-element:nth-of-type(2) {
animation-delay:1s;
animation-fill-mode:backwards;
}
.mein-element:nth-of-type(3) {
animation-delay:2s;
animation-fill-mode:backwards;
}
.mein-element:nth-of-type(4) {
animation-delay:3s;
animation-fill-mode:backwards;
}
/* Der übrige CSS-Code ist mit oben gezeigten Beispiel identisch */
Beispiel anschauen
Beispiel 2: Animierte Grafik
Das zweite Beispiel zeigt einen Hai der im Meer schwimmt. Der Hai selbst bewegt sich dabei nur minimal nach links und rechts, der Effekt entsteht in erster Linie durch die Verschiebung des Hintergrunds. Das Beispiel verwendet mehrere Hintergrundbilder um ohne überflüssige HTML-Elemente auszukommen. Darüber hinaus wird in diesem Beispiel die Kurzschreibweise für Animationen verwendet.
<div></div>
div {
width:800px;
height:600px;
background-color:#034557;
background-image: url(hai.png), url(fische.png);
background-position: top 150px left 120px, 110px 90px;
background-repeat: no-repeat, repeat-x;
animation:ocean .75s infinite linear;
}
@keyframes ocean {
0%{
background-position: top 150px left 120px, 110px 90px;
}
50% {
background-position: top 150px left 100px, 362px 90px; /* Die Fische werden um die Häfte der Breite der fische.png-Grafik verschoben */
}
100% {
background-position: top 150px left 120px, 615px 90px; /* Die Fische werden um die volle Breite der fische.png-Grafik verschoben */
}
}
Beispiel anschauen
Jetzt bist Du gefragt
Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.
