Comme faire un fondu à l'ouverture (fadeIn) sur une div?

**fredericmarcel** · 24/11/2015, 16h07

Comment faire pour qu'à l'ouverture de la page index.php, le div contenant le bouton "connexion" apparaisse progressivement (2000ms)

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<div id="connexion" align="center">  
        <button id="boutonConnexion" type="button" class="btn btn-success">connexion</button>
</div>

Merci de votre aide

Invité · 24/11/2015, 22h28

Bonjour,

Glossaire des propriétés CSS - VII. Propriétés de transformation et d'animation (CSS 3)

**fredericmarcel** · 25/11/2015, 13h04

Je te remercie.
Un petit problème, je ne veux pas faire l'animation où la transition en cliquant sur un bouton, mais 1 seconde après l'ouverture de la page.
Le bouton n'est pas visible à l'ouverture :
Je viens de passer deux heures à essayer.
Je commence à vraiment regretter actionscript dans lequel je me débrouillais fort bien

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
<style>
  #monBouton {
           visibility: hidden;         
   }
</style>
<div id="connexion" align="center">  
        <button id="boutonConnexion" type="button" class="btn btn-success">connexion</button>
 
  </div>

Invité · 25/11/2015, 13h10

1/ Euhhh,...
... c'est là TOUT le code que tu peux nous montrer ?

2/ Tu n'as pas dû lire ce qu'il faut :
VII-C. Propriétés d'animation

Il existe plusieurs différences notables entre une transition et une animation CSS.

Une transition est déclenchée lorsqu'une propriété CSS est modifiée alors qu'une animation va modifier elle-même une propriété selon des règles déterminées.

Et pour ta question en particulier, voir : Délai de l'animation

**fredericmarcel** · 25/11/2015, 14h02

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
 
<style>
 #monBouton {
               visibility:hidden;
            -webkit-animation-name: myFadeIn; /* Chrome, Safari, Opera */
            -webkit-animation-duration: 3s; /* Chrome, Safari, Opera */
            -webkit- animation-delay: 1s;
            animation-name: myFadeIn;
            animation-duration: 3s;  
            animation-delay: 1s;
       }
 
        @-webkit-keyframes myFadeIn {
            from {visibility: hidden;}
            to {visibility: visible;}
        }
       /* Standard syntax */
      @keyframes myFadeIn {
            from {visibility: hidden;}
            to {visibility: visible;}
        }
</style>
<body>
 
        <div id="connexion" align="center">  
                <button id="monBouton"  onclick="myFunction()" type="button" class="btn btn-success btn-lg  active">connexion</button>  
        </div>
</body>

Un petit problème : le bouton "monBouton" apparait au bout d'une seconde (animation-delay: 1s) mais instantantanément (pas de animation-duration:3s)
En plus, au bout de 3s, le bouton disparait

**fredericmarcel** · 25/11/2015, 17h00

Merci le problème est résolu.

Comme faire un fondu à l'ouverture (fadeIn) sur une div?

CSS

Discussions similaires

Partager

Partager