Übergangs-Animation (transition)...
Übergangs-Animationen können mit der CSS-Eigenschaft transition definiert werden. Die Definition einer Animation besteht aus der zu animierenden Eigenschaft (property), der Dauer (duration), der Zeitverlaufsfunktion (timing function) und der Startverzögerung (delay). Es kann eine komma-getrennte Liste solcher Definitionen angegeben werden.
transition: {property 1}
            {duration 1}s
            {timing function 1}
            {delay 1}s,
            ...,
            {property n}
            {duration n}s
            {timing function n}
            {delay n}s;
Die zu animierende Eigenschaft (property) kann das Schlüsselwort all sein, oder der Name einer einzelnen animierbaren CSS-Eigenschaft. (Näheres siehe unten.)
Die Dauer (duration) und die Startverzögerung (delay) sind Zeitangaben mit der Maßeinheit s oder ms. 0 ist erlaubt. Die Verzögerung kann negativ sein. Dann beginnt die Animation mit dem Zustand, der nach dieser Zeit erreicht wäre.
Bei der Zeitverlaufsfunktion (timing function) können die Parameter für eine Stufenfunktion oder eine kubische Bezierkurve angegeben werden. Für einige Verläufe gibt es Schlüsselworte. (Näheres siehe unten.)
Zur Animation die Maus über
die Fläche bewegen.
 
Der Gegenstand von Animationen...
Die transition-Eigenschaft ist selbst (nur) ein Teil der gesamten CSS-Deklaration eines HTML-Elements. Sie beschreibt, wie der Übergang zu dieser CSS-Deklaration animiert werden soll.
.declaration1 {
  ...
}
.declaration2 {
  ...
  transition: all 1s linear 0s;
}
Mit den obigen Deklarationen würden bei einem Element, dessen CSS sich von declaration1 zu declaration2 ändert, die Werte der animierbaren Eigenschaften innerhalb 1 Sekunde von ihrem alten Wert in den neuen überführt.
Eigenschaften, die in der neuen Deklaration den gleichen Wert haben, sind von der Animation nicht betroffen.
Nur die Breite ändert sich:
.transitionwidth {
  width: 9em;
  background-color: #FFBB00;
  ...
}
.transitionwidth:hover {
  width: 16em;
  transition: all 1s linear 0s;
}
 
Nur die Hintergrundfarbe ändert sich:
.transitioncolor {
  width: 9em;
  background-color: #FFBB00;
  ...
}
.transitioncolor:hover {
  background-color: #FFFFFF;
  transition: all 1s linear 0s;
}
 
:hover als Auslöser von Animationen...
Damit überhaupt ein Wechsel der CSS eines Elements stattfindet, bedarf es eines Auslösers. Ein klassischer Auslöser ist eine :hover-Deklaration.
Ein Wechsel könnte auch programmgesteuert erfolgen, bspw. durch JavaScript. Im Folgenden wird jedoch grundsätzlich eine :hover-Deklaration als Auslöser vorausgesetzt.
Bei der Definition von Übergangs-Animationen für den :hover-Zustand muss berücksichtigt werden, dass die transition-Eigenschaft sich nur auf die Deklaration bezieht, deren Teil sie selbst ist.
Wenn also nicht nur beim Eintritt in den hoover-Zustand eine Animation erfolgen soll, sondern auch beim Verlassen des Zustands, muss auch bei der 'normalen' CSS-Deklaration eine transition-Eigenschaft hinzugefügt werden.
Animation nur beim
Eintritt von hoover:
.transitionhover1 {
  width: 9em;
  ...
}
.transitionhover1:hover {
  width: 16em;
  transition: all 1.2s linear 0s;
}
 
Animation auch beim
Verlassen von hoover:
.transitionhover2 {
  width: 9em;
  transition: all 1.2s linear 0s;
  ...
}
.transitionhover2:hover {
  width: 16em;
  transition: all 1.2s linear 0s;
}
 
Die zu animierende Eigenschaft (property)...
Wenn für die zu animierende Eigenschaft (property) das Schlüsselwort all angegeben wird, werden alle animierbaren Eigenschaften animiert, deren Werte sich beim Übergang zur neuen CSS-Deklaration ändern.
Wird dagegen der Name einer einzelnen Eigenschaft angegeben, wird nur diese animiert. Die übrigen werden sofort geändert.
Eine Liste der animierbaren Eigenschaften finden Sie hier beim W3C.
Die Animation der einzelnen CSS-Eigenschaften basiert im Endeffekt auf Berechnungsvorschriften für die Animation der Datenypen, die den CSS-Eigenschaften zugrunde liegen, wie z.B. Farben, Längenangaben oder Prozentwerte.
Eine Liste der Datentypen und wie entsprechende Werte bei der Animation interpoliert werden finden Sie hier beim W3C.
Nur die Breite wird animiert,
die Höhe ändert sich sofort:
.transitionwidth {
  width: 9em;
  height: 3em;
  background-color: #FFBB00;
  transition: width 1s linear 0s;
  ...
}
.transitionwidth:hover {
  width: 16em;
  height: 5em;
  background-color: #FFFFFF;
  transition: width 1s linear 0s;
}
 
Die Zeitverlaufsfunktion (timing function)...
Der Zeitverlauf einer Animation wird entweder durch eine Stufenfunktion steps(..) oder eine kubische Bezierfunktion cubic-bezier(..) bestimmt, für die eine Reihe von Parametern angegeben werden können.
Darüber hinaus können folgende Schlüsselworte angegeben werden, die vordefinierten Aufrufen der Stufen- oder Bezierfunktion entsprechen.
linear = gleichmäßig
ease = sanft
ease-in = sanft schneller werdend
ease-out = sanft langsamer werdend
ease-in-out = sanft startend und endend
step-start = sprunghaft am Anfang
step-end = sprunghaft am Ende
Auf die Funktionen steps(..) und die cubic-bezier(..) wird hier nicht weiter eingegangen. Eine Beschreibung finden Sie hier beim W3C.
transition: all 2s ease-in 0s;
 
transition: all 2s ease-out 0s;
 
transition: all 2s ease-in-out 0s;
 
Animation der Größe eines Elements...
Wenn die Größe eines Elements animiert werden soll, können unterschiedliche Ansätze gewählt werden, je nachdem, ob benachbarte Elemente durch die Animation verschoben werden sollen, oder nicht.
.declaration {
  width: 100px;
  height: 50px;
}
.declaration:hover {
  width: 200px;
  height: 100px;
  transition: all 1s linear 0s;
}
oder
.declaration:hover {
  transform: scale(2,2);
  transition: all 1s linear 0s;
}
Im ersten Beispiel nimmt das Element im Verlauf der Animation mehr Platz ein und benachbarte Elemente werden verschoben. Im zweiten Fall, bei der Vergößerung mittels transform, ändert sich der Raum, den das transformierte Element einnimmt, nicht und der Inhalt von benachbarten Elementen wird ggf. überlagert.
Größenänderung mit transform:
.transitiontransform {
  height: 3em;
  ...
}
.transitiontransform:hover {
  transform: scale(1,1,5);
  transition: all 1s
              linear 0s;
}
Element davor
 
Element danach
Größenänderung direkt:
.transitionheight {
  height: 3em;
  ...
}
.transitionheight:hover {
  height: 4.5em;
  transition: all 1s
              linear 0s;
}
Element davor
 
Element danach
Listen von Übergangs-Animationen...
Als Wert für das transition-Element kann auch eine komma-getrennte Liste von Übergangs-Definitionen angegeben werden, bspw. um verschiedene Elemente mit unterschiedlichen Zeitverläufen zu animieren.
transition: {property 1}
            {duration 1}s
            {timing function 1}
            {delay 1}s,
            ...,
            {property n}
            {duration n}s
            {timing function n}
            {delay n}s;
Dabei werden die einzelnen Animationen nicht nacheinander abgespielt, sondern jede während des Zeitraums, der sich aus der jeweiligen Definition ergibt. Die sichtbaren Effekte können sich also überlagern.
Animationen in der Liste
überlagern sich:
.transitionlist {
  width: 9em;
  background-color: #FFBB00;
  ...
}
.transitionlist:hover {
  width: 20em;
  background-color: #FFFFFF;
  transition: width 4s
              linear 0s,
              background-color 5s
              linear 1.5s;
}
 
Weitere Informationen...
CSS-Eigenschaften zur Definition der Bestandteile von Übergangs-Animationen
Die transition-Eigenschaft ist die Zusammenfassung oder Kurzform der folgenden vier Eigenschaften, mit denen die Bestandteile property, duration, timing function und delay jeweils als komma-getrennte Liste angeben werden können.
transition-property
transition-duration
transition-timing-function
transition-delay
Browser-Unterstützung
Detaillierte Informationen über die Unterstützung der transition-Eigenschaft durch diverse unterschiedliche Browser-Versionen gibt es bei caniuse.com.
Formale Definition
Eine formale Definition der Animationen gibt es beim W3C.
CSS-Eigenschaften und Beispiele...
Auf den folgenden Seiten finden Sie einige technische Informationen und Beispiele zu CSS-Eigenschaften, die im CSS-Baukasten für Dekorationen und Schriftarten verwendet werden können:
Prografaktur Software GmbH | Hasenbergsteige 15 | 70178 Stuttgart | Deutschland | service@css-baukasten.de