Transitions mit CSS3

Transitions  dienen dazu, ganz ohne JavaScript etc. schöne und sanfte Übergänge zwischen CSS-Eigenschaften zu bekommen, darüber hinaus kann die Dauer solcher Übergänge festgelegt werden. Verschiedene Eigenschaften können mit einer Transition versehen werden. Zum Beispiel:

  • (Schrift-)Größen
  • Farben für Text oder Hintergründe
  • Maßeinheiten bspw. bei Abständen oder Positionen

Hier gibt es noch viele mehr, schauen Sie dazu bitte auch in die W3C-Spezifikationen. Hier ein Beispiel für eine Transition mit Farbwechsel bei einem Textabsatz:

Die transition-poperty bestimmt die CSS-Eigenschaft die mit einer Transition also einem weichem Übergang versehen werden soll.

Die transition-duration bestimmt, wie lange der Übergang dauern soll. Dies wird entweder in ms (Millisekunden) oder s (Sekunden) angegeben. Dieser Wert ist optional, man braucht ihn nur, wenn der Übergang länger dauern soll als der Standard. Standardmäßig wird die Transition innerhalb von 0 Sekunden durchgeführt. Man sieht den Übergang somit normalerweise nicht, sondern nur den veränderten Zustand (in unserem Fall die geänderte Farbe).

Der Wert transition-delay ist optional und bestimmt die Verzögerung nach der mit der Animation angefangen werden soll, nachdem man mit dem Mauszeiger über das betreffende Element bewegt hat.

Möglich sind auch mehrere Transitions gleichzeitig.

Hierbei findet nicht nur ein Farbwechsel statt, sondern das Element rotiert auch gleichzeitig, wobei beides innerhalb von 1,5 Sekunden stattfindet und beides erst nach einer Sekunde beginnt. Sollen die beiden Transitions nicht gleich lange dauern oder erst eins nach dem anderen beginnen, kann man für die verschiedenen Eigenschaften auch zwei verschiedene Werte für transition-delay angeben.

Jetzt fängt der Farbwechsel gleich an, die Rotation aber erst nach 1,0 Sekunden.

Mit transition-timing-function kann man die Beschleunigungskurve der Drehung beeinflussen. Entweder nimmt man dazu eine der vielen Standard-Kurven. Hier nur ein kleiner Auszug:

  • ease: äquivalent zu cubic-bezier(0.25, 0.1, 0.25, 1.0).
  • linear: äquivalent zu cubic-bezier(0.0, 0.0, 1.0, 1.0).
  • ease-in: äquivalent zu cubic-bezier(0.42, 0, 1.0, 1.0).
  • ease-out: äquivalent zucubic-bezier(0, 0, 0.58, 1.0).ease-in-out
  • ease-in-out: äquivalent zu cubic-bezier(0.42, 0, 0.58, 1.0)

Die Erläuterung der Kurven und auch noch mehr Kurven finden Sie hier auf dieser Webseite des W3C.

Die 2. Möglichkeit ist, sich eine eigene Beschleunigungskurve zu bauen. Dazu braucht man die cubic-bezier-Werte. Einen Codegenerator dafür finden Sie hier auf cubic-bezier.com (Sie können sich hier die Kurve  – mit Demo – zusammenklicken und den entsprechenden Code dazu erstellen lassen). Geben Sie die Werte dann folgendermaßen ein (Beispiel):

Der relativ lange Code einer Transition kann auch zusammengefasst werden. Die Kurzschreibweise des obigen Codes ist:

Erläuterung: die einzelnen Übergänge werden unter der allgemeinen Eigenschaft transition zusammengefasst und untereinander jeweils durch ein Komma getrennt. Zwischen den Kommastellen werden die Eigenschaften hintereinander weg in folgender Reihenfolge notiert:

  • transition-property
  • transition-duration
  • transition-timing-function
  • transition-delay

Achtung! Für bestimmte Browser werden für oben beschriebene Eigenschaften Vendor-Präfixe benötigt!