CSS transition: Übergänge ohne JavaScript animieren

Mit CSS3 kamen zahlreiche neue Funktionen, mit denen sich sehenswerte Effekte bauen lassen. Eine der nützlichsten davon ist die Eigenschaft transition.

transition ist ein CSS3-Modul. Damit erzeugst du einen dynamischen Wechsel auf einem HTML-Element oder einer Klasse, und zwar mit einem denkbar einfachen Aufbau:

transition: property duration timing-function delay;

CSS3-Transitions sind eine gute Möglichkeit, einer Website etwas Animation zu geben, ganz ohne JavaScript. Vorab kannst du dir ein CSS-Tutorial von mir ansehen, das genau diese Eigenschaft nutzt:
Tutorial – eine Karte in CSS bauen

Die Eigenschaft

Damit transition überhaupt greift, muss zuerst die Eigenschaft feststehen, auf die sie sich bezieht. In unserem Beispiel legen wir einen Übergang auf background-color. Für sich allein geschrieben sieht das so aus:

transition-property: background-color;

Der Übergang

Steht die Eigenschaft fest, brauchst du als Nächstes einen Start- und einen Endwert. In unserem Beispiel heißt das: eine Ausgangsfarbe und ein Endwert, der an eine Bedingung geknüpft ist.
Wir setzen die Übergangseigenschaft hier also auf background-color, definieren den Startwert von background-color für #element und legen den Endwert für den Moment fest, in dem der Nutzer über das Element fährt, also über #element:hover:

#element {
    transition-property:background-color;
    background-color:red;
}
#element:hover {
    background-color:blue;
}

Dauer der Animation

Die Eigenschaft samt Start- und Endwert steht, jetzt fehlt noch die Dauer des Übergangs. Die gibst du in Sekunden oder Millisekunden an:

#element {
    transition-property:background-color;
    transition-duration: 0.2s;
    background-color:red;
}
#element:hover {
    background-color:blue;
}

Das heißt: Das div #element wechselt seine background-color über 200 Millisekunden hinweg (0,2 Sekunden)

Die Eigenschaft transition-timing-function

Für einen Übergang reicht dieser Code völlig aus, es geht aber noch feiner mit transition-timing-function. Über diese Eigenschaft änderst du den Verlauf des Übergangs. Voreingestellt ist die weiche Kurve ease. Du kannst aber ebenso die anderen mitgelieferten Verläufe nehmen oder dir mit einer Bézier-Kurve deinen eigenen bauen.

transition-timing-function: ease;
transition-timing-function: ease-in;
transition-timing-function: ease-out;
transition-timing-function: ease-in-out;
transition-timing-function: linear;
transition-timing-function: step-start;
transition-timing-function: step-end;

transition-timing-function: cubic-bezier(0.1, 0.5, 1.0, 0.1);

In unserem Beispiel sieht das so aus:

#element {
    transition-property:background-color;
    transition-duration: 0.2s;
    transition-timing-function:ease-in-out;
    background-color:red;
}
#element:hover {
    background-color:blue;
}

Den Übergang verzögern

Genau wie bei der Dauer gibt es auch für den Start eine eigene Eigenschaft: transition-delay verzögert den Beginn des Übergangs.

transition-delay: 1s;

#element {
    transition-property:background-color;
    transition-duration: 0.2s;
    transition-timing-function:ease-in-out;
    transition-delay: 1s;
    background-color:red;
}
#element:hover {
    background-color:blue;
}

···