11486 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Comment avoir un loader avec transition ?

Pages :
(reprise du message précédent)

Smiley lol
Je vais regarder de nouveau ton lien (mozilla... pas wikipédia Smiley rolleyes ).
J'ai essayé cela :
#load{
    width:100%;
    height:100%;
    position:fixed;
    z-index:9999;
    background:url("imgs/LoaderCarre.gif") no-repeat center center white;
    animation: fadeout 6s;
    -moz-animation: fadeout 6s; /* Firefox */
    -webkit-animation: fadeout 6s; /* Safari et Chrome */
    -o-animation: fadeout 6s; /* Opera */
}
@keyframes fadeout {
    from {
        opacity:1;
    }
    to {
        opacity:0;
    }
}
@-moz-keyframes fadeout { /* sur Firefox */
    from {
        opacity:1;
    }
    to {
        opacity:0;
    }
}
@-webkit-keyframes fadeout { /* sur Safari et Chrome */
    from {
        opacity:1;
    }
    to {
        opacity:0;
    }
}
@-o-keyframes fadeout { /* sur Opera */
    from {
        opacity:1;
    }
    to {
        opacity:0;
    }
}

La transition se fait bien Smiley biggrin mais l'arrêt (de la transition) est brutal Smiley hum
Merci pour ton aide Smiley cligne
Tu n'as peut être pas appliqué la transition sur l'élément qui apparait.
6s c'est énorme ! Faut être patient !
Oui, 6 secondes c'est énorme. Je vais rectifier cela.
Par contre, le fadeout est bien appliqué au load qui apparaît (et placé avant le <body>).
Ça fonctionne encore une fois, mais l'arrêt de la transition (à la fin) s'arrête brutalement.
Bonne fin de journée Smiley cligne
ED
el_debutanti a écrit :
Ça fonctionne encore une fois, mais l'arrêt de la transition (à la fin) s'arrête brutalement.

Au lieu de :
@keyframes fadeout {
    from {
        opacity: 1; /* on peut supprimer cette règle car c'est la valeur par défaut */
    }
    to {
        opacity: 0;
    }
}

On peut déjà simplifier comme ceci :
@keyframes fadeout {
    to {
        opacity: 0;
    }
}

Et pour éviter l'arrêt brusque de la transition il faut procéder comme ceci :
@keyframes fadeout {
    50% { /* transition de 1 à 0 entre 0% et 50%, puis de 0 à 1 de 51% à 100%. CQFD */
        opacity: 0;
    }
}
Prévenir un modérateur
Pages :
Répondre au sujet
Aller à