CSS3 - Animation

1. Ab sofort ohne JavaScript

Tja, es stimmt tatsächlich. Mit CSS3 kann man mittlerweile auch eigene Animationen bauen. Allerdings funktioniert das nur in Kombination mit den Pseudoklassen :hover, :target und :focus. Derzeit unterstützen nur der Internet Explorer 10, Firefox und Opera diese Eigenschaft nativ, Safari und Chrome benötigen dafür ihr entsprechendes Vendorpräfix.

• 18.0
• 12.x
• 5.1
• 23.0
• 10.0

2. transition

Diese neue Angabe besteht aus vier verschiedenen Einstellungen. Als da wären.

• transition-delay gibt die Verzögerung in Sekunden oder Millisekunden an, mit der Animation startet.
• transition-duration legt die Dauer der Animation in Sekunden oder Millisekunden fest.
• transition-property definiert die zu ändernden Eigenschaften.
• transition-timing-function gibt die "Art" der Animation an.
  • linear gleich bleibend vom Anfang bis zum Ende.
  • ease langsamer Anfang, dann schneller und am Ende wieder langsam.
  • ease-in langsamer Anfang.
  • ease-out langsames Ende
  • ease-in-out langsamer Anfang, langsames Ende.
  • cubic-bezier lässt vier eigene Werte von 0 bis 1 zu. Zwischenschritte sind Dezimalwerte. So richtig habe ich das selber noch nicht ganz begriffen, darum reiche ich die Details bei den Tutorials nach. Für die Ungeduldigen sei das hier empfohlen.
  • steps sorgt für eine Ruckelanimation.

3. Das Prinzip

Man definiert nun für ein Element die gewünschten Eigenschaften im Normalzustand und dann die für die entsprechende Pseudoklasse (siehe oben). Wichtig dabei ist, dass man die zu animierenden Eigenschaften nicht(!) für beide Zustände festlegen muss. Will man also zum Beispiel die Breite ändern, so muss die nur bei der Pseudoklasse definiert sein.

Bei den transition-Eigenschaften gibt es nun zwei Möglichkeiten. Baut man sie in den Normalzustand ein, so läuft die Animation zwei Mal ab. Also erst vorwärts, wenn der Zustand der Pseudoklasse erreicht wurde (zum Beispiel :hover) und dann wieder rückwärts, wenn wieder der Normalzustand wiederhergestellt wurde.

Wird transition dagegen bei der Pseudoklasse definiert, so läuft die Animation nur dann, wenn der entsprechende Zustand erreicht wurde. Sobald man den beendet, wird augenblicklich der Ursprung wiederhergestellt.

Muy importante!

Besonders beim :hover sollte man auf zwei Dinge achten. Denn wenn man zum Beispiel mit Breiten- beziehungsweise Höhenangaben oder transform arbeitet, so kann der Cursor seinen Fokus verlieren und die Animation stoppt.

4. Eine mögliche Ausgangslage

Es gibt für <div>-Element mit der Klasse animation folgenden Normalzustand.

div.animation {
  width: 100px;
  height: 100px;
  border: 1px solid #36628A;
  border-radius: 7px;
  box-shadow: 5px 5px 5px #aaa;
  padding: 0 10px;
}

Bei einem :hover soll nun Folgendes angepasst werden.

div.animation:hover {
  width: 150px;
  height: 50px;
  border: 5px solid #000;
  border-radius: 12px;
  background: #36628A;      
  color: #fff;
  transform: rotate(360deg);
}

Es ändern sich also folgende Eigenschaften.

• width
• height
• border
• border-radius
• background (nur im :hover)
• color (nur im :hover)
• transform (nur im :hover)

Aminiert werden sollen aber nur folgende Eigenschaften.

• width
• height
• border
• border-radius
• transform

5. Eine Animation

Auflistung der zu animierenden Eigenschaften

transition-property: width, height, border, border-radius, transform;

Wenn man diese Eigenschaft weglässt, so wird der komplette Von-Nach-Zustand animiert.

Dauer der Animation

transition-duration: 4s;

Diese Angabe ist praktisch Pflicht, da der Standwert 0 und somit ziemlich sinnfrei ist.

Art der Animation

transition-timing-function: ease-in;

Wenn man das weglässt, so wird ease als Standard genommen.

Verzögerung der Animation

transition-delay: 1000ms;

Kann man auch ignorieren, Standard ist ebenfalls 0, also keine Verzögerung.

Die Kurzschreibweise

Ist natürlich auch möglich, das Schema solltet ihr ja kennen. Allerdings kann das nach ersten Tests bei dem einen oder anderen Browser zu Problemen führen. Details dazu reiche ich nach. Außerdem ist sie bei komplexeren Animationen sehr unübersichtlich. Ich rate also erst mal davon ab.

zurück zum vorherigen Abschnitt