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 seinen vorherigen Zustand ohne Animation zurück.

transition-property#

Mittels transition-property wird das 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);
}

Wichtig

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

transition-duration#

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

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

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

See the Pen transition-property by csswebsite (@csswebsite) on CodePen.

transition-timing-function#

Mit der Eigenschaft transition-timing-function wird der Ablauf der Animation / des Übergangs festgelegt: gleichmäßig, schnell und dann langsam und weitere.

Eigenschaftswert	Erklärung
ease	Standard. Nimmt in der Mitte des Übergangs an Geschwindigkeit zu und verlangsamt sich am Ende wieder.
linear	Geschwindigkeit ist gleichbleibend.
ease-in	Beginnt langsam, wobei die Übergangsgeschwindigkeit bis zur Fertigstellung zunimmt.
ease-out	Beginnt schnell, wobei die Übergangsgeschwindigkeit bis zur Fertigstellung abnimmt.
ease-in-out	Beginnt langsam mit dem Übergang, beschleunigt sich und verlangsamt sich dann wieder.

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

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

See the Pen transition-timing-function by csswebsite (@csswebsite) on CodePen.

transition-delay#

transition-delay bewirkt eine Startverzögerung der Animation / des Übergangs. Die Angabe erfolgt wieder in Sekunden oder Millisekunden.

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

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

See the Pen transition-delay by csswebsite (@csswebsite) on CodePen.

Mehrere Übergänge animieren#

Mehrere Übergänge / Zustandsveränderungen können gleichzeitig animiert werden. Dazu muss die Kurzschreibweise transition verwendet werden. Transition erwartet nacheinander die Angaben für transition-property, transition-duration, transition-timing-funtion und transition-delay.

Die einzelnen Angaben werden Kommagetrennt angegeben.

Bemerkung

transition-timing-function und transition-delay sind optionale Angaben.

h1 {
    color: aqua;
    font-size: 50px;
    transition: color 2s, font-size 500ms ease-in-out, background-color 1s linear 1s;
}

h1:hover {
    color: crimson;
    font-size: 80px;
    background-color: #f2f2f2;
}

See the Pen transition by csswebsite (@csswebsite) on CodePen.