Transition¶

Mit transition können Übergänge / Zustandsveränderungen von Elementen animiert werden.

Wichtig

Transition sollte immer dem Element direkt zugewiesen werden und nicht der Zustandsveränderung. Sonst wird die Animation nur angewendet, wenn gehovert wird und springt wieder in den vorherigen Zustand zurück – ohne Animation.

transition-property¶

Mittels transition-property wird die Eigenschaft angegeben, die eine Zustandsveränderung bewirkt.

Eigenschaftswert	Erklärung
Eigenschaftsname	Eigenschaft, die animiert werden soll.
all	Alle Eigenschaften, die eine Zustandsveränderung auslösen, werden animiert.

.box {
  transition-property: transform;
}

.box:hover {
  transform: translateX(100px);
}

Hover Me

Wichtig

Ohne die Angabe, wie lange die Animation laufen soll, findet keine Animation statt. Es wird zusätzlich transition-duration benötigt.

transition-duration¶

transition-duration gibt die Zeit in Sekunden oder Millisekunden an, wie lange die Animation dauern soll.

.box {
  transition-property: transform;
  transition-duration: 2s;
}

.box:hover {
  transform: translateX(100px);
}

Hover Me

transition-timing-function¶

Mit transition-timing-function wird der Ablauf der Animation festgelegt.

Eigenschaftswert	Erklärung
ease	Standard. Beschleunigt in der Mitte und verlangsamt am Ende.
linear	Gleichbleibende Geschwindigkeit.
ease-in	Beginnt langsam, wird schneller.
ease-out	Beginnt schnell, wird langsamer.
ease-in-out	Langsam → schnell → langsam.

.box {
  transition-property: transform;
  transition-duration: 2s;
  transition-timing-function: ease-out;
}

.box:hover {
  transform: translateX(100px);
}

Hover Me

transition-delay¶

transition-delay bewirkt eine Startverzögerung der Animation.

.box {
  transition-property: transform;
  transition-duration: 2s;
  transition-timing-function: ease-out;
  transition-delay: 3s;
}

.box:hover {
  transform: translateX(100px);
}

Hover Me

Mehrere Übergänge animieren¶

Mehrere Übergänge können gleichzeitig animiert werden. Dafür können die Eigenschaftswerte kommagetrennt angegeben werden oder es wird die Kurzschreibweise transition verwendet:

Alle Eigenschaften

.box {
  transition-property: transform, background-color, border-radius;
  transition-duration: 2s, 1s, 2.5s;
  transition-timing-function: ease-out, ease-in-out, linear;
}

.box:hover {
  transform: translateX(100px);
  background-color: goldenrod;
  border-radius: 24px;
}

Hover Me

transition

Reihenfolge:

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

Mehrere Übergänge werden kommagetrennt angegeben.

Bemerkung

transition-timing-function und transition-delay sind optional.

.box {
  width: 200px;
  height: 100px;
  background-color: crimson;
  transition: transform 2s ease-out, background-color 1s ease-in-out,
    border-radius 2.5s linear;
}

.box:hover {
  transform: translateX(100px);
  background-color: goldenrod;
  border-radius: 24px;
}

Hover Me