Faire alterner deux animations

11 décembre 2017 à 14:18:21

Bonjour, j'ai un problème avec mes animations, je n'arrive pas à les mettre sur la même ligne et les faire alterner.. je voudrais faire alterner ces deux animation sur la même ligne dans le bandeau noir ( le carré noir )

c'est-à-dire que la première animations soit dans la box puis qu'elle parte vers la droite et en suite la deuxième animation vient à la place de la première est repart vers la droite et rebelote..

quelqu'un pourrait m'aider à faire ça svp ?

Merci d'avance :)).

HTML

<!DOCTYPE> 
<html>
	<head>
	<link href="defile.css.css" rel="stylesheet" media="all" type="text/css" />
	<body> 
	
<div class="boxBlack"> <p class = 'premiertextdefilant'> Bonjour! Bienvenu sur (...........)</p> 

                  <p class ='deuxiemetextdefilant'> D E U X I E M E A N I M A T I O N </p>

</div>

	</<body>
</html>

CSS

.premiertextdefilant{ 
   position: relative;
   color:#FF4500;
   font-size: 15px;
   letter-spacing: 1px;
 text-align: center;
animation-name: anim1;
 animation-duration: 5s;
 animation-iteration-count:infinite; 
 animation-direction: alternate; 
 

 }
 
 
 
 

 @keyframes anim1 {
 
 from {
    margin-left:100%;
    width:300%
  }
  
  to {
    margin-left:0%;
    width:100%;
  }
}
   



   .boxBlack{  
   border: 1px solid #FF4500; 
   width: 31%;
   height:20%;
   background-color: #010100; 
   color:#FF4500;
   letter-spacing: 1px;
   overflow:hidden;
   }
   
   
   
  .deuxiemetextdefilant{ 
   position: relative;
   color:#FF4500;
   font-size: 15px;
   letter-spacing: 1px;
 text-align: center;
animation-name: anim2;
 animation-duration: 7s;
 animation-iteration-count:infinite; 
 animation-direction: alternate; 

 }
 
 
  @keyframes anim2 {
 
 from {
    margin-right:120%;
   width:300%
  }
  
  to {
    margin-right:0%;
    width:100%;
  }
}

Ivaalo

11 décembre 2017 à 15:21:56

Il faudrait que tu alternes les diapos avec les pourcentages (au lieu de from et to). Par exemple, ta première diapo apparait de 0% à 50%, puis ta deuxième apparait de 50% à 100% et ainsi de suite. Imagine que TOUTE ton animation (les deux slides) fasse 100%, et divise ce temps en fonction du nombre de diapo.

@keyframes anim1 {  
 0%{
    margin-left:100%;
    width:300%
  }
   
  50%{
    margin-left:0%;
    width:100%;
  }
}
    
@keyframes anim2 {
 50%{
    margin-right:120%;
    width:300%
  }
   
  100%{
    margin-right:0%;
    width:100%;
  }
}

Le secret du SEO. Merci !

FarCry

11 décembre 2017 à 16:19:19

Je vois ce que tu veut dire

mais je suis totalement perdu avec les @keyframes j'ai essayé de faire comme tu m'as dit mais je n'y arrive pas ..

MrChampy

11 décembre 2017 à 17:33:33

Hello,

Juste un petite exemple avec un fiddle pour t'aider à (peut être) mieux comprendre : https://jsfiddle.net/gaqx6p4a/

EmmanuelBeziat

11 décembre 2017 à 17:56:42

Salut,

Pourquoi ne pas simplement utiliser animation-delay ? C'est bien à ça que ça sert à priori: retarder le déclenchement d'une animation.

Sinon, si on veut faire plus complexe, on peut guetter la fin d'une animation avec l'API animation, mais ça me semble overkill ici.

Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !

MrChampy

12 décembre 2017 à 9:30:51

Il me semble que l'animation-delay ne fonctionne pas sur une animation en boucle non ?

Remarque je suis pas sûr qu'il veuille la faire en boucle, auquel cas ça suffirait en effet. C'est le "rebelote" qui me trouble.

EmmanuelBeziat

12 décembre 2017 à 14:10:37

Mmmh, effectivement.

Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !