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.

CSS-Animation mit Keyframes

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:

Code-Beispiel auf Fiddle

Kommentieren

Ich akzeptiere die Datenschutzerklärung.