CSS3 transition mehrere

Hier werden für verschiedene Eigenschaften mit verschiedenen Zeiten und Easing Funktionen eingegeben. Die beiden Werte werden mit Komma separiert.

Der erste Zeitwert ist die Dauer der zweite Zeitwert ist eine Verzögerung. In diesem Fall wird zuerst die Breite animiert. Nach einer Sekunde wird die Höhe animiert, das dauert dann 2 Sekunden.

Hier wird ist die Kurzschreibweise eher unübersichtlich.

   
div {
	background-color: #7EB7AA;
	width: 100px;
	height: 100px;
	transition: width  1s 0s ease-in, height  2s 1s ease-out;
}
div:hover {
    width: 300px;
    height: 200px;
}