CSS Animationen

CSS Animationen

CSS kann Animationseffekte für HTML-Elemente ermöglichen, ohne JavaScript oder Flash zu verwenden!

CSS

In diesem Kapitel werden Sie Folgendes lernen:

  • @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 Browser-Version an, die die Eigenschaft vollständig unterstützt.

Eigenschaft Chrome IE Firefox Safari Opera
@keyframes 43.0 10.0 16.0 9.0 30.0
animation-name 43.0 10.0 16.0 9.0 30.0
animation-duration 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-direction 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 ist CSS-Animation?

Animationen lassen Elemente allmählich von einem Stil in einen anderen übergehen.

Sie können beliebige Anzahl von CSS-Eigenschaften ändern.

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

Keyframes enthalten die Stile, die ein Element zu einer bestimmten Zeit hat.

@keyframes-Regel

Wenn Sie in @keyframes Regel wird ein CSS-Stil angegeben, die Animation wird zu einer bestimmten Zeit allmählich vom aktuellen Stil zum neuen Stil wechseln.

Um die Animation in Kraft zu setzen, muss sie an ein Element gebunden werden.

Der folgende Beispiel bindet die "example"-Animation an das <div>-Element. Die Animation dauert 4 Sekunden und ändert die Hintergrundfarbe des <div>-Elements von "red" allmählich in "yellow":

Beispiel

/* Animation-Code */
@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}
/* Animationseffekt auf dieses Element anwenden */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

Versuchen Sie es selbst

Hinweis:animation-duration Eigenschaft definiert, wie lange der Animation abgeschlossen sein muss. animation-duration Wenn die Eigenschaft nicht gesetzt ist, wird die Animation nicht ausgeführt, da der Standardwert 0s (0 Sekunden) ist.

Im obigen Beispiel haben wir durch die Verwendung der Schlüsselwörter "from" und "to" (die 0% (Beginn) und 100% (Abschluss) darstellen), festgelegt, wann der Stil geändert wird.

Sie können auch Prozentsatzwerte verwenden. Durch die Verwendung von Prozentsätzen können Sie beliebig viele Stiländerungen hinzufügen.

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

Beispiel

/* Animation-Code */
@keyframes example {
  0%   {background-color: red;}
  25% {background-color: yellow;}
  50%  {background-color: blue;}
  100% {background-color: green;}
}
/* Elemente, auf die die Animation angewendet wird */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

Versuchen Sie es selbst

Das folgende Beispiel ändert die Hintergrundfarbe und die Position des <div>-Elements, wenn die Animation 25%, 50% und 100% erreicht hat:

Beispiel

/* Animation-Code */
@keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}
/* Elemente, auf die die Animation angewendet wird */
div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

Versuchen Sie es selbst

Verzögerte Animation

animation-delay Das Attribut legt die Verzögerungszeit für den Start der 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;
  animation-delay: 2s;
}

Versuchen Sie es selbst

Negative Werte sind ebenfalls erlaubt. Wenn negative Werte verwendet werden, beginnt die Animation, so als ob sie bereits N Sekunden abgespielt hätte.

Im folgenden Beispiel beginnt die Animation, so als ob sie bereits 2 Sekunden abgespielt hätte:

Beispiel

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

Versuchen Sie es selbst

Die Anzahl der Ausführungen der Animation einstellen

animation-iteration-count Das Attribut bestimmt, wie oft die Animation ausgeführt werden soll.

Das folgende Beispiel führt die Animation 3 Mal aus, bevor sie stoppt:

Beispiel

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

Versuchen Sie es selbst

Der folgende Beispiel verwendet den Wert "infinite", um die Animation ewig fortzusetzen:

Beispiel

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

Versuchen Sie es selbst

Rückwärts oder alternierend ausführende Animation

animation-direction Das Attribut bestimmt, ob die Animation vorwärts, rückwärts oder alternierend abgespielt wird.

animation-direction Die Eigenschaft akzeptiert die folgenden Werte:

  • normal - Die Animation wird normal abgespielt (vorwärts). Standardwert
  • reverse - Die Animation wird in umgekehrter Richtung (rückwärts) abgespielt
  • alternate - Die Animation wird zuerst vorwärts und dann rückwärts abgespielt
  • alternate-reverse - Die Animation wird zuerst rückwärts und dann vorwärts abgespielt

Das folgende Beispiel führt die Animation in umgekehrter Richtung (rückwärts) aus:

Beispiel

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

Versuchen Sie es selbst

Der folgende Beispiel verwendet den Wert "alternate", um die Animation zuerst vorwärts und dann rückwärts auszuführen:

Beispiel

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

Versuchen Sie es selbst

Der folgende Beispiel verwendet den Wert "alternate-reverse", um die Animation zuerst rückwärts und dann vorwärts auszuführen:

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;
}

Versuchen Sie es selbst

Definition der Geschwindigkeitskurve der Animation

animation-timing-function Die Eigenschaft legt die Geschwindigkeitskurve der Animation fest.

animation-timing-function Die Eigenschaft akzeptiert die folgenden Werte:

  • ease - Bestimmen Sie eine Animation, die von langsam beginnend, dann beschleunigend und schließlich wieder langsamer endend (Standard)
  • linear - Bestimmen Sie eine Animation, deren Geschwindigkeit von Anfang bis Ende konstant ist
  • ease-in - Bestimmen Sie eine Animation, die am Anfang langsamer ist
  • ease-out - Bestimmen Sie eine Animation, die am Ende langsamer ist
  • ease-in-out - Bestimmen Sie eine Animation, die am Anfang und am Ende langsamer ist
  • cubic-bezier(n,n,n,n) - Definieren Sie Ihre eigenen Werte in der dreifachen Quadratischen Bezierfunktion

Nachfolgende Beispiele zeigen 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;}

Versuchen Sie es selbst

Definition der Füllmodi der Animation

CSS-Animationen beeinflussen das Element nicht vor dem Abspielen des ersten Schlüsselframes oder nach dem Abspielen des letzten Schlüsselframes.animation-fill-mode kann die Eigenschaft dieses Verhalten überdecken.

Wenn die Animation nicht abgespielt wird (vor dem Beginn, nach dem Ende oder beides gleichzeitig am Ende der Animation),animation-fill-mode Die Eigenschaft legt die Stylwerte des Zielelements fest.

Die animation-fill-mode-Eigenschaft akzeptiert die folgenden Werte:

  • keine - Standardwert. Die Animation wendet vor der Ausführung oder nach der Ausführung keine Stylwerte auf das Element an.
  • vorwärts - Das Element behält die Stylwerte bei, die durch die letzte Schlüssel帧 festgelegt wurden (abhängig von animation-direction und animation-iteration-count).
  • rückwärts - Das Element erhält die Stylwerte, die durch die erste Schlüssel帧 festgelegt wurden (abhängig von animation-direction), und behält diesen Wert während der Animation während der Verzögerung bei.
  • beide - Die Animation folgt gleichzeitig den Regeln für die Vorwärts- und Rückwärtsbewegung, um die Animationseigenschaften in beide Richtungen zu erweitern.

Der folgende Beispiel zeigt, wie das <div>-Element am Ende der Animation die Stylwerte der letzten Schlüssel帧 beibehält:

Beispiel

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

Versuchen Sie es selbst

Der folgende Beispiel macht das <div>-Element vor dem Start der Animation (während der Verzögerung) den Stilwert der ersten Schlüsselzeile haben:

Beispiel

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

Versuchen Sie es selbst

Der folgende Beispiel macht das <div>-Element vor dem Start der Animation den Stilwert der ersten Schlüsselzeile haben, und behält den Stilwert der letzten Schlüsselzeile bei, 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;
}

Versuchen Sie es selbst

Animation Kurzwahl

Im folgenden Beispiel werden sechs Animationseigenschaften verwendet:

Beispiel

div {
  animation-name: example;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-delay: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

Versuchen Sie es selbst

Verwenden Sie die Kurzwahl animation Die Eigenschaft kann auch den gleichen Animationseffekt wie im obigen Beispiel erzielen:

Beispiel

div {
  animation: example 5s linear 2s infinite alternate;
}

Versuchen Sie es selbst

CSS-Animationseigenschaften

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

Eigenschaft Beschreibung
@keyframes Regelt den Animation-Modus.
animation Setzt die Kurzwahl für alle Animationseigenschaften.
animation-delay Regelt die Verzögerung, bevor die Animation beginnt.
animation-direction Bestimmt, ob die Animation vorwärts, rückwärts oder alternierend abgespielt wird.
animation-duration Regelt die Zeit, die eine Periode der Animation dauern soll.
animation-fill-mode Regelt den Stil des Elements, wenn die Animation nicht abgespielt wird (vor dem Start, nach dem Ende oder beides gleichzeitig).
animation-iteration-count Regelt die Anzahl der malen, die die Animation abgespielt werden soll.
animation-name Regelt den Namen der @keyframes-Animation.
animation-play-state Definiert, ob die Animation läuft oder angehalten wird.
animation-timing-function Definiert die Geschwindigkeitskurve der Animation.