Bryan Albrecht

CSS3 Animation

Kompatibilität

Mit CSS3 Animationen ist es möglich Elemente in HMTL ohne JavaScript zu animieren.

Dies funktioniert, in dem CSS Eigenschaften verändert werden.

Um CSS3 Animationen verwenden zu können, muss man zuerst Keyframes definieren.

Keyframes sind dazu da um den momentanen Zustand eines Elementes zu speichern.

@keyframes Regel

Wenn ein Style im Keyframe festgelegt wird, dann ändert dieser vom vorherigen zum neuen Style.

Um die Animation auszuführen, muss der Keyframe an ein Element gebunden werden. Das folgende Beispiel zeigt ein einfaches Beispiel, welches den Hintergrund von allen <div> von Schwarz auf Weiss ändert.

  1. /* Animations Code */
  2. @keyframes test {
  3. from {background-color: #000000;}
  4. to {background-color: #FFFFFF;}
  5. }
  1. /* Element, auf welches die Animation gebunden wird */
  2. div {
  3. width: 120px;
  4. height: 120px;
  5. background-color: #FFFFFF;
  6. animation-name: test;
  7. animation-duration: 4s;
  8. }

Animation Optionen

Für jede Animation kann man verschiedene Optionen festlegen. Das heisst, dass man zum Beispiel angeben kann, wie lange oder wie oft eine Animation gespielt werden soll.

Anzahl Wiederholungen

Bei der gewünschten Animation kann man angeben, wie oft sie wiederholt werden soll. Das heisst, dass die Animation entweder X mal läuft oder unendlich lange abgespielt wird.

Im folgenden Beispiel wird die Animation 5-mal abgespielt:

  1. div {
  2. width: 120px;
  3. height: 120px;
  4. background-color: #FFFFFF;
  5. animation-name: test;
  6. animation-duration: 4s;
  7. animation-iteration-count: 5;
  8. }

Im nächsten Beispiel wird die gleiche Animation verwendet, welche aber unendlich oft abgespielt wird:

  1. div {
  2. width: 120px;
  3. height: 120px;
  4. background-color: #FFFFFF;
  5. animation-name: test;
  6. animation-duration: 4s;
  7. animation-iteration-count: infinite;
  8. }

Verzögerung vor Start

Für jede Animation kann man eine Verzögerung einstellen. Das heisst, dass man angeben kann, wie lange gewartet werden soll, bis die Animation startet.

Das folgende Beispiel zeigt eine Animation, welche erst nach 4 Sekunden gestartet wird:

  1. div {
  2. width: 120px;
  3. height: 120px;
  4. background-color: #FFFFFF;
  5. animation-name: test;
  6. animation-duration: 3s;
  7. animation-delay: 4s;
  8. }

Rückwarts / Abwechselnd

Standartweise wird eine Animation vorwärts abgespielt.

Dies lässt sich aber über die Optionen ändern. Dafür gibt es zwei verschiedene Einstellungen:

  • • animation-direction: reverse;
  • • animation-direction: alternate;

Reverse lässt die Animation rückwärts abspeieln.

Alternate verwendet rückwärts und vorwärts. Das heisst, dass die beiden sich abwechseln.

Diese Option wird wie vorhin ins CSS eingefügt:

  1. div {
  2. width: 120px;
  3. height: 120px;
  4. background-color: #FFFFFF;
  5. animation-name: test;
  6. animation-duration: 3s;
  7. animation-direction: reverse;
  8. }

Geschwindigkeit

Es ist möglich die Geschwindigkeit einer Animation genauer festzulegen. Das heisst, dass eine Animation zum Beispiel langsam starten und schnell beendet werden soll.

Es gibt verschieden Optionen dafür:

  • animation-timing-function: linear;
  • animation-timing-function: ease;
  • animation-timing-function: ease;
  • animation-timing-function: ease-out;
  • animation-timing-function: ease-in-out;

Jede dieser Optionen hat seine eigenen eigenschaften:

  • ease – langsam, schnell, langsam (Standard)
  • linear – gleichmässiges Tempo
  • ease-in – langsamer Start
  • ease-out - langsames Ende
  • ease-in-out - langsamer Start und Ende

Kurze Schreibweise

Um nicht für jede Animation einen riesigen Text schreiben zu müssen, kann man eine Gesamte Funktionsbindung samt Optionen auf einer Zeile schrieben.

Bei dieser Schreibweise muss darauf geachtet werden, dass die Optionen in der richtigen Reihenfolge geschrieben werden.

Die beiden folgenden Beispiele haben das gleiche Ergebnis:

  1. div {
  2. animation-name: test;
  3. animation-duration: 9s;
  4. animation-timing-function: linear;
  5. animation-delay: 3s;
  6. animation-iteration-count: infinite;
  7. animation-direction: alternate;
  8. }
  1. div {
  2. animation: test 9s linear 3s infinite alternate;
  3. }

Zusammenfassung

In diesem Tutorial wird erklärt, wie man in CSS3 mit den Animationen arbeitet.

Es wird gezeigt, wie man eine Animation an ein Element bindet und dieser Animation Optionen mitgibt.

Die Wichtigsten Optionen wurden erklärt und sollten angewendet werden können.