CSS: Einblenden bei Seitenaufbau.

Um den Seitenaufbau nicht so hart zu machen, würde man gerne nach dem Laden der Seite ein weiches Einblenden sehen. Mit Javascript lässt sich das so machen. Das Problem ist: Der Effekt muss bei opacity:0 beginnen. Hat ein Besucher Javascript deaktiviert, sieht er nichts. Man könnte nun zu Beginn per JS eine Class ".js" dem body hinzufügen, und dann body.js {opacity.0} setzen. Problem: Oft reicht die Zeit zwischen laden von HTML und JS nicht, um sicher die opacity zu setzen, außerdem wird zu allererst HTML und CSS ausgeführt, das Element also sichtbar, bevor es nach dem Laden von JS wieder ausgeblendet wird. Es entsteht also ein kurzes Aufflackern. Sehr unschön.

Also muss eine andere Lösung her, die auch ohne Javascript geht. Und da kommt die CSS3 Keyframe-Adnimation ins Spiel. Wir definieren eine Animation, indem wwir die Werte innerhalb von mit from {} und to {} ändern. Diese werden dann entsprechend anmiert. Diese Animation weisen wir dann unserem Element zu. In unserem Anwendungsbeispiel sieht das dann so aus:

body {
    -webkit-animation: fadein 500ms; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 500ms; /* Firefox < 16 */
        -ms-animation: fadein 500ms; /* Internet Explorer */
         -o-animation: fadein 500ms; /* Opera < 12.1 */
            animation: fadein 500ms;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1 !important; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1 !important; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1 !important; }
}

Wie lange man noch die Prefixes angeben muss, weiß ich leider auch nicht :-(.