Utilisation de CSS pour un effet de fondu lors du chargement de la page

Question

Est-ce que les transitions CSS peuvent être utilisées pour permettre à un paragraphe de texte de s'estomper lors du chargement de la page?

J'ai vraiment aimé comment cela rendait sur http://dotmailapp.com/ et j'aimerais utiliser un effet similaire en utilisant du CSS. Le domaine a depuis été acheté et n'a plus l'effet mentionné. Une copie archivée peut être consultée sur la machine à remonter le temps.

Illustration

En ayant ce balisage:

    Ceci est un test

avec la règle CSS suivante:

#test p {
    opacity: 0;
    margin-top: 25px;
    font-size: 21px;
    text-align: center;
    -webkit-transition: opacity 2s ease-in;
    -moz-transition: opacity 2s ease-in;
    -o-transition: opacity 2s ease-in;
    -ms-transition: opacity 2s ease-in;
    transition: opacity 2s ease-in;
}

Comment déclencher la transition lors du chargement?

Answer 1

Méthode 1:

Si vous recherchez une transition auto-invoquante, vous devriez utiliser les Animations CSS 3. Ils ne sont pas non plus pris en charge, mais c'est exactement le type de chose pour lequel ils ont été créés.

CSS

#test p {
    margin-top: 25px;
    font-size: 21px;
    text-align: center;

    -webkit-animation: fadein 2s; /* Safari, Chrome et Opera > 12.1 */
       -moz-animation: fadein 2s; /* Firefox < 16 */
        -ms-animation: fadein 2s; /* Internet Explorer */
         -o-animation: fadein 2s; /* Opera < 12.1 */
            animation: fadein 2s;
}

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

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

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

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

Démo

• http://jsfiddle.net/SO_AMK/VV2ek/

Prise en charge des navigateurs

Tous les navigateurs modernes et Internet Explorer 10 (et ultérieurs) : http://caniuse.com/#feat=css-animation

Méthode 2:

Alternativement, vous pouvez utiliser jQuery (ou JavaScript pur ; voir le troisième bloc de code) pour changer la classe au chargement :

jQuery

$("#test p").addClass("load");​

CSS

#test p {
    opacity: 0;
    font-size: 21px;
    margin-top: 25px;
    text-align: center;

    -webkit-transition: opacity 2s ease-in;
       -moz-transition: opacity 2s ease-in;
        -ms-transition: opacity 2s ease-in;
         -o-transition: opacity 2s ease-in;
            transition: opacity 2s ease-in;
}

#test p.load {
    opacity: 1;
}

JavaScript pur (non inclus dans la démo)

document.getElementById("test").children[0].className += " load";

Démo

• http://jsfiddle.net/SO_AMK/a9dnW/

Prise en charge des navigateurs

Tous les navigateurs modernes et Internet Explorer 10 (et ultérieurs) : http://caniuse.com/#feat=css-transitions

Méthode 3:

Ou, vous pouvez utiliser la méthode que .Mail utilise :

jQuery

$("#test p").delay(1000).animate({ opacity: 1 }, 700);​

CSS

#test p {
    opacity: 0;
    font-size: 21px;
    margin-top: 25px;
    text-align: center;
}

Démo

• http://jsfiddle.net/SO_AMK/a9dnW/3/

Prise en charge des navigateurs

jQuery 1.x : Tous les navigateurs modernes et Internet Explorer 6 (et ultérieurs) : http://jquery.com/browser-support/
jQuery 2.x : Tous les navigateurs modernes et Internet Explorer 9 (et ultérieurs) : http://jquery.com/browser-support/

Cette méthode est la plus compatible car le navigateur cible n'a pas besoin de prendre en charge les transitions CSS 3 ou les animations.

Answer 2

Vous pouvez utiliser l'attribut HTML onload="" et utiliser JavaScript pour ajuster le style d'opacité de votre élément.

Laissez votre CSS comme vous l'avez proposé. Modifiez votre code HTML en :

        Ceci est un test

Cela fonctionne également pour faire apparaître la page complète une fois le chargement terminé :

HTML:

CSS:

body{ 
    opacity: 0;
    transition: opacity 2s;
    -webkit-transition: opacity 2s; /* Safari */
}

Consultez le site web de W3Schools : transitions et un article pour changer les styles avec JavaScript.

Answer 3

En réponse à la question de @A.M.K sur la façon de réaliser des transitions sans jQuery. Un exemple très simple que j'ai mis ensemble. Si j'avais plus de temps pour réfléchir à cela, je pourrais peut-être éliminer complètement le code JavaScript:

    body {
        background-color: red;
        transition: background-color 2s ease-in;
    }

    window.onload = function() {
        document.body.style.backgroundColor = '#00f';
    }

    test

Answer 4

Vous voudrez regarder le javascript, et non le css pour accomplir cette tâche : http://api.jquery.com/animate/

http://jsfiddle.net/FC3rT/

Answer 5

Vous pourriez le faire (avec jQuery). Notez cependant que ce n'est pas agréable d'avoir un fondu au chargement.

    $(function () {
        var removal = document.getElementById("removeFancy");
        $(removal).fadeTo("fast", 0.5);
        $(removal).fadeOut("fast", function () {
            this.parentNode.removeChild(this);
        });
    });