Praxisbeispiel Animation - Stufenweises Einblenden einer Grafik

Bei dieser Beispielanimation mit CSS3 ist das Bild (eingefügt als Hintergrundbild) schon von Anfang an vorhanden, es wird aber durch fünf Quadrate verdeckt, deren opacity-Wert mit transition von 1 auf 0 vermindert wird, so dass das Hintergrundbildbild schrittweise sichtbar wird.

Mit Hilfe eines Cookies ermittelt, ob der gleiche Besucher schon einmal auf dieser Seite gewesen ist. Wenn dies der Fall ist, wird das Banner ohne Animation angezeigt. Testen kann man das, in dem man einfach mit F5 ein Refresh durchführt. Der Cookie ist allerdings nur 30 Sekunden gültig.

Ich habe das Beispiel mit Firefox 17 und Google Chrome Version 26.0.1383.0 canary positiv getestet. Mit dem Internet Explorer 8 wird natürlich keine Animation angezeigt, nur ein fester Hintergrund.

Zurück zu CSS3-Animationen Teil 2

Zurück zur CSS-Übersicht