CSS- Animationen

CSS-Animationen

CSS ermöglicht die Animation von HTML-Elementen ohne Verwendung von JavaScript oder Flash!

In diesem Kapitel lernen Sie folgende Eigenschaften kennen:

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

Browserunterstützung für Animationen

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

Was sind CSS-Animationen?

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

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

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

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

Die @keyframes-Regel

Wenn Sie CSS-Stile innerhalb der @keyframes Regel angeben, ändert sich die Animation zu bestimmten Zeiten allmählich vom aktuellen Stil zum neuen Stil.

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

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

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

Im obigen Beispiel haben wir angegeben, wann sich der Stil ändern wird, indem wir die Schlüsselwörter „von“ und „bis“ verwendet haben (was 0 % (Anfang) und 100 % (abgeschlossen) darstellt).

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

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:

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

Verzögern Sie eine Animation

Die animation-delayEigenschaft gibt eine Verzögerung für den Start einer Animation an.

Das folgende Beispiel hat eine Verzögerung von 2 Sekunden, bevor die Animation gestartet wird:

Auch negative Werte sind erlaubt. Wenn Sie negative Werte verwenden, beginnt die Animation so, als ob sie bereits N Sekunden lang abgespielt worden wäre.

Im folgenden Beispiel beginnt die Animation so, als ob sie bereits 2 Sekunden lang abgespielt worden wäre:

Legen Sie fest, wie oft eine Animation ausgeführt werden soll

Die animation-iteration-countEigenschaft gibt an, wie oft eine Animation ausgeführt werden soll.

Im folgenden Beispiel wird die Animation dreimal ausgeführt, bevor sie stoppt:

Das folgende Beispiel verwendet den Wert "infinite", um die Animation endlos fortzusetzen:

Animation in umgekehrter Richtung oder in alternativen Zyklen ausführen

Die animation-directionEigenschaft gibt an, ob eine Animation vorwärts, rückwärts oder abwechselnd abgespielt werden soll.

Die Eigenschaft animation-direction kann die folgenden Werte haben:

• normal- Die Animation wird normal abgespielt (vorwärts). Dies ist Standard
• 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 zuerst rückwärts, dann vorwärts abgespielt

Im folgenden Beispiel wird die Animation in umgekehrter Richtung (rückwärts) ausgeführt:

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

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

Geben Sie die Geschwindigkeitskurve der Animation an

Die animation-timing-functionEigenschaft gibt den Geschwindigkeitsverlauf der Animation an.

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

• ease - Gibt eine Animation mit einem langsamen Start, dann schnell und dann langsamem Ende an (dies ist die Standardeinstellung)
• linear - Gibt eine Animation mit der gleichen Geschwindigkeit von Anfang bis Ende an
• ease-in - Gibt eine Animation mit langsamem Start an
• ease-out - Gibt eine Animation mit einem langsamen Ende an
• ease-in-out - Gibt eine Animation mit langsamem Start und Ende an
• cubic-bezier(n,n,n,n)- Lässt Sie Ihre eigenen Werte in einer kubischen Bezier-Funktion definieren

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

Geben Sie den Füllmodus für eine Animation an

CSS-Animationen wirken sich nicht auf ein Element aus, bevor der erste Keyframe wiedergegeben wird oder nachdem der letzte Keyframe wiedergegeben wird. Die Eigenschaft animation-fill-mode kann dieses Verhalten überschreiben.

Die animation-fill-modeEigenschaft gibt einen Stil für das Zielelement an, wenn die Animation nicht abgespielt wird (bevor sie beginnt, nachdem sie endet oder beides).

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

• none- Standardwert. Die Animation wendet vor oder nach der Ausführung keine Stile auf das Element an
• forwards- Das Element behält die Stilwerte, die durch das letzte Schlüsselbild festgelegt wurden (abhängig von der Animationsrichtung und der Anzahl der Animationsiterationen)
• backwards- Das Element erhält die Stilwerte, die vom ersten Schlüsselbild festgelegt werden (abhängig von der Animationsrichtung), und behält diese während der Animationsverzögerungszeit bei
• both- Die Animation folgt den Regeln für vorwärts und rückwärts und erweitert die Animationseigenschaften in beide Richtungen

Im folgenden Beispiel behält das <div>-Element die Stilwerte des letzten Keyframes bei, wenn die Animation endet:

Im folgenden Beispiel erhält das <div>-Element die vom ersten Schlüsselbild festgelegten Stilwerte, bevor die Animation beginnt (während der Animationsverzögerung):

Im folgenden Beispiel erhält das <div>-Element die vom ersten Schlüsselbild festgelegten Stilwerte, bevor die Animation beginnt, und behält die Stilwerte vom letzten Schlüsselbild bei, wenn die Animation endet:

Animations-Kurzschrift-Eigenschaft

Das folgende Beispiel verwendet sechs der Animationseigenschaften:

Derselbe Animationseffekt wie oben kann durch Verwendung der Kurzschrifteigenschaft erzielt werden animation:

<style>
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: ;
  : 2s;
}

@keyframes example {
  from {: red;}
  to {: blue;}
}
</style>

<body>
  <div>This is a div</div>
</body>

CSS-Animationseigenschaften

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