18100 sujets

Questions générales et questions de débutants

Faire un fadeIn 1 seconde après l'ouverture de la page

Comment faire un fondu fadeIn sur le bouton "monBouton"
Le fondu devrait démarrer 1seconde après que la page soit ouverte et durer 3 secondes.
Je sais que c'est tout simple, mais je viens de passer deux heures sans y parvenir. Smiley decu
Merci de votre aide. Smiley smile 


<style>
  #monBouton {
           visibility: hidden;         
   }
</style>
<div id="connexion" align="center">  
        <button id="boutonConnexion" type="button" class="btn btn-success">connexion</button>
 
  </div>
Modérateur
Salut,

Il faut passer par une animation CSS.
Tu feras attention, l'id du bouton de ton DOM #boutonConnexion ne correspond pas à l'id dans ton CSS #monBouton
#monBouton {        
    -webkit-animation-name: fadeIn; /* Chrome, Safari, Opera */
    -webkit-animation-delay: 1s; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 3s; /* Chrome, Safari, Opera */
    animation-name: fadeIn;
    animation-delay: 1s;
    animation-duration: 3s;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes fadeIn {
    0% {opacity: 0;}
    100% {opacity: 1;}
}
/* Standard syntax */
@keyframes fadeIn {
    0% {opacity: 0;}
    100% {opacity: 1;}
}


https://jsfiddle.net/pLzo2hrs/1/
Merci Laurent.
Est-il possible que le bouton "monBouton" soit invisible à l'ouverture de la page et que le fadeIn commence au bout de 1s car je veux afficher le titre du site avant de proposer à l'utilsateur de se connecter?
Modérateur
Mmmmm effectivement le delay nous met dedans...

On peut tenter de contourner le problème en incluant le delay dans l'animation en le faisant nous meme :
Mettre 0s delay (au lieu de 1s)
Faire une anim de 4s (au lieu de 3s)
Fait en sorte que la premiere seconde l'opacité ne bouge pas (1s/4s = 25%)

#monBouton {        
    -webkit-animation-name: fadeIn; /* Chrome, Safari, Opera */
    -webkit-animation-delay: 0s; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 4s; /* Chrome, Safari, Opera */
    animation-name: fadeIn;
    animation-delay: 0s;
    animation-duration: 4s;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes fadeIn {
    0% {opacity: 0;}
    25% {opacity: 0;}
    100% {opacity: 1;}
}
/* Standard syntax */
@keyframes fadeIn {
    0% {opacity: 0;}
    25% {opacity: 0;}
    100% {opacity: 1;}
}


Mais il y a une chance pour que ça clignote un peu au chargement....
En pur CSS j'ai du mal a voir comment éviter ça...
Modérateur
Ah bah en fait j'ai trouvé ! Smiley biggrin

animation-fill-mode:forwards;
"After the animation ends (determined by animation-iteration-count), the animation will apply the property values for the time the animation ended"

J'ai appris un truc super intéressant dis donc ! J'en ai aussi chié sur cette question ! Merci ! Smiley murf

Du coup ca devient :

#monBouton {
    -webkit-animation-name: fadeIn; /* Chrome, Safari, Opera */
    -webkit-animation-delay: 1s; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 3s; /* Chrome, Safari, Opera */
    -webkit-animation-fill-mode:forwards;
    animation-name: fadeIn;
    animation-delay: 1s;
    animation-duration: 3s;
    animation-fill-mode:forwards;
    opacity:0;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes fadeIn {
    0% {opacity: 0;}
    100% {opacity: 1;}
}
/* Standard syntax */
@keyframes fadeIn {
    0% {opacity: 0;}
    100% {opacity: 1;}
}
Sujet clos
Aller à