Discussion :

[ickyknox]

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

[rodolphebrd]

Bonjour,

Une transition ne serait pas plutôt souhaitable?

[NoSmoking]

Bonjour,
déjà il serait intéressant de savoir sur quels navigateurs tu fais tes tests, tous n'étant pas encore égaux dans ce domaine.

Concernant ton soucis, il y à un problème de superposition d'éléments.
Il te faut mettre l'id=bouton en position:absolute avec un right:0 et un bottom:0, elle passera ainsi au dessus de la balise A.

Il te faut bien évidement mettre l'id=vignette en position:relative.

nota: l'effet n'apporte strictement rien à mon sens

[ickyknox]

merci pour vos réponses , je vais tester ca.

Mon but est de reproduire l'animation de ce site ==>
http://www.bluetechonline.com/

quand vous survolez l'image.

A moins que vous ayez une meilleure astuce pour reproduire ce déplacement de triangle ?

[NoSmoking]

Il ne s'agit visiblement que de transition avec changement de right et bottom au survol du parent.

Un coup d'oeil sur les sources devrait t'en dire long...

[rodolphebrd]

Une partie est gérée en Javascript.

[ickyknox]

MERCI !!