CSS-Animationen

CSS-Animationen

CSS ermöglicht die Animation von HTML-Elementen, ohne JavaScript oder Flash zu verwenden!

CSS

In diesem Kapitel lernen Sie die folgenden Eigenschaften kennen:

  • @keyframes
  • animation-name
  • animation-duration
  • animation-delay
  • animation-iteration-count
  • animation-direction
  • animation-timing-function
  • animation-fill-mode
  • animation

Browser-Unterstützung für Animationen

Die Zahlen in der Tabelle geben die erste Browserversion an, die die Eigenschaft vollständig unterstützt.

Eigenschaft
@keyframes 43.0 10.0 16.0 9.0 30.0
Animation-name 43.0 10.0 16.0 9.0 30.0
Animation-Dauer 43.0 10.0 16.0 9.0 30.0
animation-delay 43.0 10.0 16.0 9.0 30.0
animation-iteration-count 43.0 10.0 16.0 9.0 30.0
Animation-Richtung 43.0 10.0 16.0 9.0 30.0
animation-timing-function 43.0 10.0 16.0 9.0 30.0
animation-fill-mode 43.0 10.0 16.0 9.0 30.0
Animation 43.0 10.0 16.0 9.0 30.0

Was sind CSS-Animationen?

Eine Animation lässt ein Element allmählich von einem Stil zu einem anderen wechseln.

Sie können so viele CSS-Eigenschaften ändern, wie Sie möchten.

Um CSS-Animationen zu verwenden, müssen Sie zunächst einige Keyframes für die Animation festlegen.

Keyframes halten fest, welche Stile das Element zu bestimmten Zeiten haben wird.

Die @keyframes-Regel

Wenn Sie CSS-Stile innerhalb der @keyframesRegel angeben, wird die Animation zu bestimmten Zeiten schrittweise vom aktuellen Stil zum neuen Stil wechseln.

Damit eine Animation funktioniert, müssen Sie die Animation an ein Element binden.

Das folgende Beispiel bindet die Animation „example“ an das <div>-Element. Die Animation dauert 4 Sekunden und ändert die Hintergrundfarbe des <div>-Elements schrittweise von „rot“ auf „gelb“:

Beispiel

/* Der Animationscode */
@keyframes example {
von {background-color: rot;}
bis {Hintergrundfarbe: gelb;}
}
/* Das Element, auf das die Animation angewendet werden soll */
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}

Probieren Sie es selbst aus “

Hinweis: Die Eigenschaft animation-duration definiert, wie lange eine Animation dauern soll. Wenn die Eigenschaft animation-duration nicht angegeben wird, erfolgt keine Animation, da der Standardwert 0s (0 Sekunden) ist.

Im obigen Beispiel haben wir mit den Schlüsselwörtern „von“ und „bis“ (die für 0 % (Beginn) und 100 % (Abschluss) stehen) angegeben, wann sich der Stil ändern wird.

Es ist auch möglich, Prozent zu verwenden. Durch die Verwendung von Prozent können Sie so viele Stiländerungen hinzufügen, wie Sie möchten.

Das folgende Beispiel ändert die Hintergrundfarbe des <div>-Elements, wenn die Animation zu 25 % abgeschlossen ist, zu 50 % abgeschlossen ist und erneut, wenn die Animation zu 100 % abgeschlossen ist:

Beispiel

/* Der Animationscode */
@keyframes example{
0% {background-color: Rot;}
25% {Hintergrundfarbe: Gelb;}
50% {Hintergrundfarbe: Blau;}
100% {Hintergrundfarbe: Grün;}
}
/* Das Element, auf das die Animation angewendet werden soll */
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}

Probieren Sie es selbst aus “

Das folgende Beispiel ändert sowohl die Hintergrundfarbe als auch die Position des <div>-Elements, wenn die Animation zu 25 %, zu 50 % und erneut, wenn die Animation zu 100 % abgeschlossen ist:

Beispiel

/* Der Animationscode */
@keyframes example{
0% {background-color:red; left:0px; top:0px;}
25% {Hintergrundfarbe:gelb; left:200px; top:0px;}
50% {Hintergrundfarbe:blau; left:200px; top:200px;}
75% {Hintergrundfarbe:grün; left:0px; top:200px;}
100% {Hintergrundfarbe:rot; left:0px; top:0px;}
}
/* Das Element, auf das die Animation angewendet werden soll */
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
}

Probieren Sie es selbst aus “

Animation verzögern

Die Eigenschaft animation-delay legt eine Verzögerung für den Start einer Animation fest.

Das folgende Beispiel hat eine Verzögerung von 2 Sekunden vor dem Start der Animation:

Beispiel

div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
Animationsverzögerung: 2s;
}

Probieren Sie es selbst aus “

Negative Werte sind ebenfalls erlaubt. Wenn Sie negative Werte verwenden, wird die Animation so gestartet, als ob sie bereits seit N Sekunden laufen würde.

Im folgenden Beispiel wird die Animation so gestartet, als ob sie bereits seit 2 Sekunden laufen würde:

Beispiel

div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-delay: -2s;
}

Probieren Sie es selbst aus “

Setzen Sie, wie oft eine Animation laufen soll

Die Eigenschaft animation-iteration-count gibt an, wie oft eine Animation laufen soll.

Das folgende Beispiel lässt die Animation 3 Mal laufen, bevor sie stoppt:

Beispiel

div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
Animation-Iteration-Count: 3;
}

Probieren Sie es selbst aus “

Das folgende Beispiel verwendet den Wert „unendlich“, damit die Animation ewig weiterläuft:

Beispiel

div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
Animations-Iterations-Zahl: infinite;
}

Selbst ausprobieren “

Animation in umgekehrter Richtung oder in abwechselnden Zyklen abspielen

Die Eigenschaft animation-direction gibt an, ob eine Animation vorwärts, rückwärts oder in abwechselnden Zyklen abgespielt werden soll.

Die Eigenschaft animation-direction kann die folgenden Werte annehmen:

  • normal – Die Animation wird normal (vorwärts) abgespielt. Dies ist die Voreinstellung
  • reverse – Die Animation wird in umgekehrter Richtung (rückwärts) abgespielt
  • alternate – Die Animation wird zuerst vorwärts abgespielt, dann rückwärts
  • alternate-reverse – Die Animation wird erst rückwärts, dann vorwärts abgespielt

Das folgende Beispiel lässt die Animation in umgekehrter Richtung (rückwärts) laufen:

Beispiel

div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-direction: reverse;
}

Probieren Sie es selbst aus “

Das folgende Beispiel verwendet den Wert „alternate“, um die Animation erst vorwärts und dann rückwärts laufen zu lassen:

Beispiel

div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
Animations-Iterations-Zahl: 2;
animation-direction: alternate;
}

Probieren Sie es selbst aus “

Das folgende Beispiel verwendet den Wert „alternate-reverse“, um die Animation erst rückwärts und dann vorwärts laufen zu lassen:

Beispiel

div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 2;
animation-direction: alternate-reverse;
}

Probieren Sie es selbst aus “

Spezifizieren Sie die Geschwindigkeitskurve der Animation

Die Eigenschaft animation-timing-function gibt die Geschwindigkeitskurve der Animation an.

Die Eigenschaft animation-timing-function kann die folgenden Werte haben:

  • ease – Legt eine Animation mit einem langsamen Start, dann schnell, dann langsam enden (dies ist die Voreinstellung)
  • linear – Legt eine Animation mit gleicher Geschwindigkeit von Anfang bis Ende fest
  • ease-in – Legt eine Animation mit langsamem Start fest
  • ease-out – Legt eine Animation mit langsamem Legt eine Animation mit einem langsamen Ende fest
  • ease-in-out – Legt eine Animation mit einem langsamen Start und Ende fest
  • cubic-bezier(n,n,n,n) – Ermöglicht die Definition eigener Werte in einer Kubik-Bezier-Funktion

Das folgende Beispiel zeigt einige der verschiedenen Geschwindigkeitskurven, die verwendet werden können:

Beispiel

#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}

Probieren Sie es selbst aus “

Füllmodus für eine Animation festlegen

CSS-Animationen wirken sich nicht auf ein Element aus, bevor der erste Keyframe abgespielt wurde oder nachdem der letzte Keyframe abgespielt wurde. Die Eigenschaft animation-fill-mode kann dieses Verhalten außer Kraft setzen.

Die Eigenschaft animation-fill-mode legt einen Stil für das Zielelement fest, wenn die Animation nicht abgespielt wird (vor Beginn, nach Ende oder beides).

Die Eigenschaft animation-fill-mode kann die folgenden Werte haben:

  • none – Standardwert. Die Animation wendet keine Stile auf das Element an, bevor oder nachdem sie ausgeführt wird
  • forwards – Das Element behält die Stilwerte bei, die durch den letzten Keyframe festgelegt wurden (abhängig von animation-Richtung und animation-iteration-count)
  • backwards – Das Element erhält die Style-Werte, die beim ersten Keyframe gesetzt wurden (abhängig von animation-direction), und behält diese während der Animationsverzögerungszeit bei
  • both – Die Animation folgt den Regeln für vorwärts und rückwärts, Erweiterung der Animationseigenschaften in beide Richtungen

Das folgende Beispiel lässt das <div>-Element die Stilwerte vom letzten Keyframe beibehalten, wenn die Animation endet:

Beispiel

div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation-name: example;
animation-duration: 3s;
animation-fill-mode: forwards;
}

Probieren Sie es selbst aus “

Das folgende Beispiel lässt das <div>-Element die Stilwerte erhalten, die beim ersten Keyframe vor dem Start der Animation (während der Animationsverzögerungszeit) gesetzt werden:

Beispiel

div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation-name: example;
animation-duration: 3s;
Animation-Delay: 2s;
Animation-Fill-Mode: Backwards;
}

Probieren Sie es selbst aus “

Das folgende Beispiel lässt das <div>-Element die Stilwerte des ersten Keyframes erhalten, bevor die Animation startet, und die Stilwerte des letzten Keyframes behalten, wenn die Animation endet:

Beispiel

div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation-name: example;
animation-duration: 3s;
animation-delay: 2s;
animation-fill-mode: both;
}

Probieren Sie es selbst aus “

Animation Shorthand Property

Das folgende Beispiel verwendet sechs der Animationseigenschaften:

Beispiel

div{
animation-name: example;
animation-duration: 5s;
Animations-Timing-Funktion: linear;
Animations-Verzögerung: 2s;
Animations-Iterations-Zahl: unendlich;
Animations-Richtung: alternativ;
}

Probieren Sie es selbst aus!“

Der gleiche Animationseffekt wie oben lässt sich auch durch die Verwendung der Shorthand-Eigenschaft animation erzielen:

Beispiel

div{
Animation: Beispiel 5s linear 2s unendlich alternierend;
}

Probieren Sie es selbst aus “

Testen Sie sich selbst mit Übungen!

CSS-Animationseigenschaften

Die folgende Tabelle listet die @keyframes-Regel und alle CSS-Animationseigenschaften auf:

Eigenschaft Beschreibung
@keyframes Spezifiziert den Animationscode
Animation Eine Shorthand-Eigenschaft zum Setzen aller Animationseigenschaften
Animations-delay Bestimmt eine Verzögerung für den Start einer Animation
animation-direction Bestimmt, ob eine Animation vorwärts abgespielt werden soll, rückwärts oder in abwechselnden Zyklen abgespielt werden soll
animation-duration Steuert, wie lange eine Animation braucht, um einen Zyklus abzuschließen
animation-fill-mode Steuert einen Stil für das Element, wenn die Animation nicht abgespielt wird (bevor sie beginnt, nachdem sie endet, oder beides)
animation-iteration-count Steuert die Anzahl, wie oft eine Animation abgespielt werden soll
animation-name Steuert den Namen der @keyframes-Animation
animation-play-state Steuert, ob die Animation läuft oder pausiert
animation-timing-function Steuert den Geschwindigkeitsverlauf der Animation

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.