Utilisation de CSS pour un effet de fondu au chargement de la page

Peut-on utiliser des transitions CSS pour permettre à un paragraphe de texte d'apparaître en fondu au chargement de la page ?

J'aime beaucoup l'effet obtenu sur [http://dotmailapp.com/][1] et j'aimerais utiliser un effet similaire en utilisant les CSS. Le domaine a depuis été acheté et ne présente plus l'effet mentionné. Une copie archivée peut être consultée [sur la Wayback Machine][1].

Illustration

Ayant ce balisage :

<div id="test">
    <p>​This is a test</p>
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

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 la transition peut-elle être déclenchée au chargement ?

[1] : http://web.archive.org/web/20120728071954/http://www.dotmailapp.com/

Peter Mortensen
Question modifiée 25 septembre 2019 в 5:20
Programmation
css opacity css-transitions
26 juillet 2012 в 11:36
16 vues
Solution

Méthode 1 :

Si vous recherchez une transition stimulante, utilisez [CSS 3 Animations][1]. Elles ne sont pas prises en charge non plus, mais c'est exactement le genre de choses pour lesquelles elles ont été conçues.

CSS

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

    -webkit-animation: fadein 2s; /* Safari, Chrome and 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 and 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; }
}

Demo

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

Support des navigateurs

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


Méthode 2 :

Vous pouvez également utiliser jQuery (ou simplement JavaScript ; 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;
}

Plain JavaScript (pas dans la démo)

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

Démo

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

Support des navigateurs

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


Méthode 3 :

Ou bien, vous pouvez utiliser la méthode utilisée par .Mail :

jQuery

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

CSS

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

Demo

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

Support des navigateurs

jQuery 1.x : Tous les navigateurs modernes et Internet Explorer 6 (et plus) : http://jquery.com/browser-support/
jQuery 2.x : Tous les navigateurs modernes et Internet Explorer 9 (et ultérieur) : 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.

[1] : https://developer.mozilla.org/en-US/docs/Web/CSS/animation

Peter Mortensen
Réponse modifiée 25 septembre 2019 в 5:16
Commentaires (15)

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

Laissez votre CSS tel que vous l'avez proposé. Modifiez votre code HTML pour :


    <div id="test">
        <p>​This is a test</p>
    </div>

Ceci fonctionne également pour faire apparaître en fondu la page complète à la fin du chargement:

HTML :

CSS :

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

Consultez le site Web [W3Schools][1] : [transitions][2] et un article sur [la modification des styles avec JavaScript][3].

[1] : http://en.wikipedia.org/wiki/W3Schools [2] : http://www.w3schools.com/css/css3_transitions.asp [3] : http://www.w3schools.com/js/js_htmldom_css.asp

Peter Mortensen
Réponse modifiée 25 septembre 2019 в 5:20
Commentaires (1)

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


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


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


    <p>test</p>
Peter Mortensen
Réponse modifiée 25 septembre 2019 в 5:18
Commentaires (0)