Seiten und Elemente per CSS einblenden (mit Keyframes)
Möchte man Seiten oder Elemente einer Webseite einblenden, so gibt es viele Möglichkeiten. Mit der CSS-Animation über Keyframes findet sich eine einfache Lösung, um Übergänge, Einblendungen und mehr zu realisieren. So lässt sich beispielsweise ein DIV langsam einblenden.
Die Animation per Keyframes funktioniert in den gängigsten Browsern und lässt sich direkt in der CSS-Datei erfassen – JavaScript ist für die Animation nicht erforderlich. Und so geht’s:
Zunächst legen wir fest, welches Element eingeblendet werden soll. Man kann hier zum Beispiel einen Absatz p verwenden oder gleich die komplette Webseite mit body ansprechen. In diesem Beispiel haben wir uns für einen Absatz mit der Klasse absatz entschieden. Der Name der Keyframe-Animation lautet einblenden. Und so schaut der CSS-Code dann aus aus:
p.absatz {
animation: einblenden 1.5s;
-moz-animation: einblenden 1.5s; /* Für Firefox */
-webkit-animation: einblenden 1.5s; /* Für Safari und Chrome */
-o-animation: einblenden 1.5s; /* Für Opera */
}
CSS Animation per Keyframes einfügen
Jetzt fehlt noch das Wichtigste: die Animation. Bei den Keyframes besteht die Möglichkeit, bei from und to beliebige CSS-Angaben zu hinterlegen. Wir haben uns hier für die Deckkraft – also opacity – entschieden. Diese startet mit 0 und animiert sich dann zu 1. Dieses entspricht einer Deckkraft von 100%. Der CSS-Code sieht dann also wie folgt aus:
@keyframes einblenden {
from { opacity:0; }
to { opacity:1; }
}
@-moz-keyframes einblenden { /* Für Firefox */
from { opacity:0; }
to { opacity:1; }
}
@-webkit-keyframes einblenden { /* Für Safari und Chrome */
from { opacity:0; }
to { opacity:1; }
}
@-o-keyframes einblenden { /* Für Opera */
from { opacity:0; }
to { opacity:1; }
}
Um den Support in möglichst vielen Browsern zu gewährleisten, kann man, wie oben im Beispiel, die zusätzlichen Keyframe-Angaben für Safari, Chrome und Opera mit angeben. Ansonsten sollte es mittlerweile auch ohne gehen.
Das komplette Beispiel findet sich zudem zum Ansehen und Ausprobieren hier:
