[Résolu] Problème de ciblage d'une animation Keyframes

Question

xavierk

22 Feb 2013 à 17:19

Bonjour à tous après avoir suivi scrupuleusement cette doc (très bien expliqué en passant)
http://www.alsacreations.com/tuto/lire/1299-timing-des-animations-et-des-transitions-en-css3.html

et écumé quelques articles sur le web concernant ce type d'action, je n'arrive pas à faire fonctionner correctement mon animation.

Je m'explique:
J'ai la base de mon site qui fonctionne avec le javascript ascensor.js
J'ai une div que je dois animer avec un effet rotation. L'animation de cette div nommée "slide" doit être animer au clic d'un lien sur ma page ici Smiley decu

ascensorLink ascensorLink1).
Le truc qui se passe c'est que mon animation marche correctement (la rotation se fait) mais pas sur ma div (slide); elle se fait uniquement sur mon lien; le lien1 en texte subit donc une rotation.
Je pense que il y a un petit problème de ciblage qui m'empêche de faire bouger non pas mon lien mais ma div.

Voici le code css que j'ai


#slide{
 		width:404px;
 		height:397px;
 		position:absolute;
 		top:100px;
 		left:100px;
 		background: url("../images/aeroplane.png");
 		
 		-webkit-animation-name: slide;
 		-moz-animation-name: slide;
 		-ms-animation-name: slide;
 		-o-animation-name: slide;
 		animation-name: slide;
 		
 	}
 	@keyframes slide {
 			 from {transform: rotate(0deg);}
 			 to {transform: rotate(360deg);}
 	}
 	/* Safari and Chrome */
 	@-webkit-keyframes slide {
   		 from {-webkit-transform: rotate(0deg);}
  		 to {-webkit-transform: rotate(360deg);}
 	}
 	/* Firefox */
 	@-moz-keyframes slide {
 			 from {-moz-transform: rotate(0deg);}
 			 to {-moz-transform: rotate(360deg);}
 	}
 	/* Opera */
 	@-o-keyframes slide {
 			 from {-o-transform: rotate(0deg);}
 			 to {-o-transform: rotate(360deg);}
 	}
 	
 	/* complétez le sélecteur : */  
 	.header.singlePage .container .nav .ascensorLink.ascensorLink1:hover{
 	 /* ... avec la propriété animation */ 
 	  -webkit-animation: slide 0.5s ease-in-out;
 	  -moz-animation: slide 0.5s ease-in-out;
 	}

et le début du code html:


<body>

      <!-- La slide  -->
          <div id="slide"></div>
          <!-- /slide -->
     
      
      <!--  Header here -->
      <div class="header singlePage ">
        <div class="container">

          <div class="logo"> <a href="index.html#/home"><img src="images/build/logo.png"
                alt="logo text"></a>
          </div>

          <div class="nav">
            <ul>
              <!--  Add require site page navigation  -->
              <li><a class="ascensorLink ascensorLink1">lien1</a></li>
              <li><a class="ascensorLink ascensorLink2">lien2</a></li>
              <li><a class="ascensorLink ascensorLink13">lien3</a></li>
              <li><a class="ascensorLink ascensorLink24">lien4</a></li>
            </ul>
          </div>

        </div>

J'avoue que je sèche pas mal sur ce soucis et il me semble avoir à peu près tout essayé. Si quelqu'un peu m'éclairer. Merci beaucoup
Modifié par xavierk (07 Mar 2013 - 04:06)

rodolpheb

22 Feb 2013 à 19:36

Bonsoir,

peut-être qu'en ajoutant des propriétés d'animation comme par exemple:

-webkit-animation: slide 7s infinite;

à la place de

-webkit-animation-name: slide;

Pensez aussi à donner un autre nom à votre animation que celle de la balise slide. Ce sera plus facile à maintenir. Smiley smile

xavierk

22 Feb 2013 à 22:08

Merci pour ta réponse Rodolpheb.

J'ai renommé mon animation comme tu l'a indiqué, pour que ce soit déjà plus clair.
Mais il n'y a toujours pas de différence; la div ne bouge pas mais mon lien sur lequel je clic pour appeler la div oui Smiley decu

Je reposte mon code css à jour ci dessous


 #slide{
 
 -webkit-animation-name: slideAnimation;
 -moz-animation-name: slideAnimation;
 -ms-animation-name: slideAnimation;
 -o-animation-name: slideAnimation;
 animation-name: slideAnimation;
 
 		width:404px;
 		height:397px;
 		position:absolute;
 		top:100px;
 		left:500px;
 		z-index: 9999999;
 		background: url("../images/aeroplane.png");
 		
 		

 		
 	}
 	@keyframes slideAnimation {
 			 from {transform: rotate(0deg);}
 			 to {transform: rotate(360deg);}
 	}
 	/* Safari and Chrome */
 	@-webkit-keyframes slideAnimation {
   		 from {-webkit-transform: rotate(0deg);}
  		 to {-webkit-transform: rotate(360deg);}
 	}
 	/* Firefox */
 	@-moz-keyframes slideAnimation {
 			 from {-moz-transform: rotate(0deg);}
 			 to {-moz-transform: rotate(360deg);}
 	}
 	/* Opera */
 	@-o-keyframes slideAnimation {
 			 from {-o-transform: rotate(0deg);}
 			 to {-o-transform: rotate(360deg);}
 	}
 	
 	/* complétez le sélecteur : */
 	/*-webkit-animation: <name> <duration> <timing_function> <delay> <iteration_count> <direction> [, ... ];*/
 	  
 	.header.singlePage .container .nav .ascensorLink.ascensorLink1:hover{
 	 /* ... avec la propriété animation */ 
 	  -webkit-animation: slideAnimation 7s infinite;
 	  -moz-animation: slideAnimation 7s infinite;
 	  -o-animation: slideAnimation 7s infinite;
 	  animation: slideAnimation 7s infinite;
 	}

En continuant mes recherches je me demandais si la solution javascript pouvait justement me sortir de ce pas du genre:


 $(".header.singlePage .container .nav .ascensorLink.ascensorLink1").click(function(){
      $("#slide").animate({"left": "+=50px"}, "slow");
    });

par exemple.

Mais bon je souhaiterais pouvoir trouver un moyen avant tout avec des transitions css car le js c'est pas trop mon fort.

Si vous avez une idée d’où peut provenir mon pb je suis preneur.
Merci infiniment

rodolpheb

22 Feb 2013 à 22:25

#slide : donnez-lui des propriétés d'animation....

xavierk

24 Feb 2013 à 23:07

a écrit :

rodolpheb
# 22 Feb 2013 - 22:25:02
#slide : donnez-lui des propriétés d'animation....

Merci encore Rodolpheb, j'ai déjà testé en mettant une propriété d'animation directement à ma div slide comme ceci


#slide{
 -webkit-animation: slideAnimation 7s infinite;
 	  -moz-animation: slideAnimation 7s infinite;
 	  -o-animation: slideAnimation 7s infinite;
 	  animation: slideAnimation 7s infinite;

 		width:404px;
 		height:397px;
 		position:absolute;
 		top:100px;
 		left:500px;
 		z-index: 9999999;
 		background: url("../images/aeroplane.png");
	
 	}

Ça fait bien bouger ma div mais ce n'est pas ce que je recherche. Je souhaite justement déclencher cet effet uniquement au clic sur le lien suivant:


.header.singlePage .container .nav .ascensorLink.ascensorLink1

Je n'ai toujours pas de solution pour mon problème. Smiley ohwell

rodolpheb

24 Feb 2013 à 23:22

Je pense qu'il faut ajouter une petite ligne de javascript
http://7labsofficial.com/tips-tricks/invoke-css3-animation-by-onclick-event.html

xavierk

7 Mar 2013 à 04:01

Désolé pour la réponse tardive mais après quelque ajustements cela marche enfin. Merci rodolpheb pour ton lien ci-dessous; ça m'a permis de l'adapter à mon cas. Toutefois je me suis rendu compte que pour ce que je souhaitais faire ça serait peut être mieux de faire partir l'anim keyframe css à partir d'un écouteur javascript qui récupère chaque changements d'url. Je suis sur le coup pour le moment.

En tout cas cela m'a servi et je le garde précieusement; merci encore pour ton aide!
Pour ceux que ça intéresse voici une partie de mon code:

Dans le head:


<script type="text/javascript">

 function anim2(){
document.getElementById('lanim1').className ='monAnim1';
 
}
 function anim1(){
document.getElementById('lanim1').className ='monAnim2';
 
}
</script>

Dans le body:


<div id="wrapper">
        <div id="lanim1"></div>
        <div id="lanim2"></div>
</div>

Dans la css:


.monAnim1
{
animation:monAnim1 2s;
-moz-animation:monAnim1 2s; /* Firefox */
-webkit-animation:monAnim1 2s; /* Safari and Chrome */

animation-direction:alternate;
-moz-animation-direction:alternate;
-webkit-animation-direction:alternate;

animation-timing-function:easeInOut;
-moz-animation-timing-function:easeInOut; /* Firefox */
-webkit-animation-timing-function:easeInOut; /* Safari and Chrome */

animation-fill-mode:forwards;
-moz-animation-fill-mode:forwards; /* Firefox */
-webkit-animation-fill-mode:forwards; /* Safari and Chrome */

animation-delay:0.5s;
-moz-animation-delay:0.5s; /* Firefox */
-webkit-animation-delay:0.5s; /* Safari and Chrome */
}
@keyframes monAnim1
{
0% {margin-left:1280px; opacity:0;}
100% {margin-left:140%; opacity:1;}
}
@-moz-keyframes monAnim1
{
0% {margin-left:1280px; opacity:0;}
100% {margin-left:140%; opacity:1;}
}
@-webkit-keyframes monAnim1
{
0% {margin-left:1280px; opacity:0;}
100% {margin-left:140%; opacity:1;}
}


#anim1{
	background: url("../images/monImage.png") no-repeat scroll 100% 0;
	width:500px;
	height:499px;
	z-index: 1;
	position: absolute;
	opacity:0;
}


.monAnim2
{
animation:monAnim2 5s;
-moz-animation:monAnim2 5s; /* Firefox */
-webkit-animation:monAnim2 5s; /* Safari and Chrome */

animation-direction:alternate;
-moz-animation-direction:alternate;
-webkit-animation-direction:alternate;

animation-timing-function:easeInOut;
-moz-animation-timing-function:easeInOut; /* Firefox */
-webkit-animation-timing-function:easeInOut; /* Safari and Chrome */

animation-fill-mode:both;
-moz-animation-fill-mode:both; /* Firefox */
-webkit-animation-fill-mode:both; /* Safari and Chrome */

animation-delay:0.5s;
-moz-animation-delay:0.5s; /* Firefox */
-webkit-animation-delay:0.5s; /* Safari and Chrome */

}
@keyframes monAnim2
{
0% {margin-left:1280px; opacity:0;}
100% {margin-left:40%; opacity:1;}
}
@-moz-keyframes monAnim2
{
0% {margin-left:1280px; opacity:0;}
100% {margin-left:40%; opacity:1;}
}
@-webkit-keyframes monAnim2
{
0% {margin-left:1280px; opacity:0;}
100% {margin-left:40%; opacity:1;}
}

Modifié par xavierk (07 Mar 2013 - 04:03)

Sujet clos

CSS et mise en forme, CSS3

[Résolu] Problème de ciblage d'une animation Keyframes