bonjour à tous.

Je suis actuellement en train d'apprendre le keyframes.

J'ai copié un code utilisant les keyframes, qui est censé faire tourner un cercle et le déplacer vers la droite, seulement de mon coté il ne fait que faire tourner le cercle sur lui même, mais sans le déplacer.

J'ai mis ce code :

Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
<div id="bouton">
<img src="/themes/defaut/img/angle.png"/>
</div>

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
29
30
31
32
33
#bouton{
	margin-top:-81px;
	margin-left:167px;
	overflow:hidden;
	}
 
 
	#bouton :hover {
   animation-name:animRoule; -webkit-animation-name:animRoule; 
   -moz-animation-name:animRoule; -o-animation-name:animRoule; 
   animation-duration:4s; -webkit-animation-duration:4s; 
   -moz-animation-duration:4s; -o-animation-duration:4s; 
   animation-iteration-count :infinite; -webkit-animation-iteration-count:infinite; 
   -moz-animation-iteration-count:infinite; -o-animation-iteration-count:infinite; 
   animation-direction:alternate; -webkit-animation-direction:alternate; 
   -moz-animation-direction:alternate; -o-animation-direction:alternate; 
   animation-timing-function:linear; -webkit-animation-timing-function:linear; 
   -moz-animation-timing-function:linear; -o-animation-timing-function:linear; 
 
}
 
@keyframes animRoule{ 
   from {transform:rotate(0deg); left:0px;} to {transform:rotate(360deg); left:350px;} 
} 
@-webkit-keyframes animRoule{ 
   from {-webkit-transform:rotate(0deg); left:0px;} to {-webkit-transform:rotate(360deg); left:350px;} 
} 
@-moz-keyframes animRoule{ 
   from {-moz-transform:rotate(0deg); left:0px;} to {-moz-transform:rotate(360deg); left:350px;} 
} 
@-o-keyframes animRoule{ 
   from {-o-transform:rotate(0deg); left:0px;} to {-o-transform:rotate(360deg); left:350px;} 
}
Sauriez vous ce qui pose problème s'il vous plais ?

si vous voulez voir le résultat :
http://essentiel-internet.danna-icreations.com/
c'est sur la premier image;Passer la souris sur le triangle

je vous remercie