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.
![CSS-Animation mit Keyframes](https://www.designerinaction.de/wp-content/uploads/2019/08/css-transition-keyframes-einblenden.jpg)
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: