Beispiel 2

Hier steht irgendein Text, dessen Inhalt nicht weiter von Bedeutung ist. Er soll nur zeigen, dass Transitions in Verbindung mit Javascript auch sehr gut funktionieren (Beim Klick auf den Button wird die CSS-Klasse dieses Textes von .text nach .text_hidden geändert und zurück). Um die Animation zu starten, musst du nur auf den Button oben klicken. Danach wird der Text erst rot eingefärbt und verschwindet kurz darauf. Bei einem zweiten Klick wird der Text wieder eingeblendet. Die Animation der Änderung der Farbe lässt sich hierbei jedoch nicht beobachten...
Unten wird im Übrigen nur die Standard-Variante des CSS-Codes angezeigt. Für die einzelnen Browser, die Transitions momentan nur experimentell unterstützen werden noch die jeweiligen Präfixe vor die Eigenschaften geschrieben. Den kompletten Code dazu findest du auch direkt hier im Quellcode dieser HTML-Datei.

div.text {
	color: #000000;
	font-size: 100%;
	opacity: 1;
}

div.text_hidden {
	opacity: 0;
	font-size: 100%;
	color: #ff0000;
}

div {
	transition: color 1.5s ease-in-out 0s, opacity 3s linear 2s;
}