Div apparante à partir de 3 secondes (?)

Résolu
Eritou Messages postés 120 Statut Membre -  
 Eritou -
Bonsoir à tous,
J'ai en page lead-première <div> de mon site internet, une video fullscreen. J'y ai rajouté un logo.svg. Malheureusement, vu la rapidité à laquelle se met le SVG à s'afficher/se raffraichir, la video apparait qq secondes après le logo. La seule solution que je vois, est de retarder l'apparition de la div logo.
Quelqu'un aurait-il une idée de comment donner un délai d'affichage à une div dans ce cas ? De simples CSS supplémentaires ? Le logo doit apparaître seulement après la diffusion de la vidéo (petit rappel ;).
Merci pour votre aide,
Eritou

4 réponses

  1. Utilisateur anonyme
     
    Avec une animation css par exemple ça devrais fonctionner, enfin si le temps est toujours le même, car si tu attend à un moment de ta video, là c'est du js
    0
  2. animostab Messages postés 3003 Date d'inscription   Statut Membre Dernière intervention   738
     
    Salut
    ex de code css 

    @keyframe logoAp {
0% {opacity:0;}
99% {opacity:0;}
100% {opacity:1;}
}

#divlogo {
animation: logoAp 3s 1;
}


    Evidemment tu peux rajouter les préfix vendeurs
    pour du crossbrowser (ie 9 / 8 etc) utilise du js ou jquery

    Un petit merci vaut mieux qu'une grande ignorance !
    Donc si votre sujet est résolu une réponse avec merci c'est pas de refus.
    0
  3. Eritou Messages postés 120 Statut Membre 4
     
    Bonsoir ZeNairolf et animostab,
    Malheureusement le code CSS (et ses préfix vendeurs) ne fonctionnent pas dans mon cas. Un extrait de mon code vous aiderait peut-être à comprendre mon soucis ?
    HTML 
    <div id="header">
   <div class="logo"><a href="#section-un"><img src="img/logo.svg"  alt="" width="50px" class="logo animClass"/></a>
    </div>
<div id="video"></div>

    CSS 
    .logo {
	width: 200px;
	padding: 0;
	position: relative;
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	-o-transform: scale(1);
	transform: scale(1);
	-webkit-transition: all 0.5s linear;
	-moz-transition: all 0.5s linear;
	-ms-transition: all 0.5s linear;
	-o-transition: all 0.5s linear;
	transition: all 0.5s linear;
	height: auto;
	top: 0px;
	right: 0px;
	bottom: auto;
	left: auto;
	margin-bottom: auto;
	margin-left: auto;
		  }
.logo:hover{
	width: 200px;
	filter: alpha(opacity=50);
	opacity: 0.15;
	-webkit-transform: scale(2.5);
	-moz-transform: scale(2.5);
	-ms-transform: scale(2.5);
	-o-transform: scale(2.5);
	transform: scale(2.5);
	top: 0px;
	right: 0px;
	position: relative;
    }
	
.animClass {
	backface-visibility: hidden;
	margin-right: 0px;
	right: 0px;
	position: relative;
	top: 0px;
	left: auto;
	bottom: auto;
	float: right;
	margin-top: 0px;
}

    Merci pour vos réponses et votre aide,
    Bon week-end,
    E.
    0
    1. Utilisateur anonyme
       
      Aussi tu n'as pas mis le keyframe et la ligne animation comme le conseille animostab et comme je l'ai suggéré. Du coup tu n'as aucune animation au bout de 3s.
      0
    2. Eritou
       
      Bonjour Zenairorolf,
      Si, j'ai bien mis le keyframe ainsi que la ligne animation (et ses préfix vendeurs). Plusieurs tentatives dans des classes ainsi que (pour voir) sur #header. J'ai même mis 20s à animation: logoAp mais le logo s'affiche toujours dès l'ouverture du site. Le code envoyé hier est celui d'origine.
      Merci pour votre aide et bon week-end.
      E.
      0
  4. animostab Messages postés 3003 Date d'inscription   Statut Membre Dernière intervention   738
     
    Salut
    fais cela (marche uniquement pour les nav acceptant css animation)
    https://caniuse.com/css-animation 

    @keyframe logoAp {
0% {opacity:0;}
99% {opacity:0;}
100% {opacity:1;}
} 

.logo {
	width: 200px;
	padding: 0;
	position: relative;
	height: auto;
	margin: auto;
        animation: logoAp 3s 1;
}


    je n'ai pas mis les prefix vendeurs a toi de rajouter pour @keyframe et animation
    0
    1. Eritou
       
      Bonjour animostab et encore merci,
      Dans mon cas l'animation ne fonctionne pas, même en respectant scrupuleusement ton code (copié>collé de la classe logo). Le keyframe se met bien juste avant ?
      J'ai par la suite tenté d'adapter ton code à ma classe logo, cela donne ceci : 
      @keyframe logoAp {
      0% {opacity:0;}
      99% {opacity:0;}
      100% {opacity:1;}
      }

      .logo {
      	width: 200px;
      	padding: 0;
      	position: relative;
      	-webkit-animation: logoAp 3s 1;
      	-moz-animation: logoAp 3s 1;
      	-ms-animation: logoAp 3s 1;
      	-o-animation: logoAp 3s 1;
      	animation: logoAp 3s 1;
      	-webkit-transform: scale(1);
      	-moz-transform: scale(1);
      	-ms-transform: scale(1);
      	-o-transform: scale(1);
      	transform: scale(1);
      	-webkit-transition: all 0.5s linear;
      	-moz-transition: all 0.5s linear;
      	-ms-transition: all 0.5s linear;
      	-o-transition: all 0.5s linear;
      	transition: all 0.5s linear;
      	height: auto;
      	top: 0px;
      	right: 0px;
      	bottom: auto;
      	left: auto;
      	margin-bottom: auto;
      	margin-left: auto;
      	display: block;
      		  }

      Je ne comprends pas :(
      Merci pour ton aide et bon week-end,
      E.
      0
    2. animostab Messages postés 3003 Date d'inscription   Statut Membre Dernière intervention   738
       
      mince petite erreur !
      c'est @keyframes et pas @keyframe (oublie du s)
      escuse
      0
    3. Eritou
       
      GE-NIAL !!! Merci animostab !!! Cette question résolue va me permettre de lancer une seconde question, un second "problème" avec ce même logo, et sur un code (parfait) qui, de mémoire, vient de... animostab (mais je n'en suis pas certain) :)
      Bonne soirée !!!
      E.
      0