Discussion :

[themoye]

Bonsoir tout le monde !

Je cherche à créer une petite animation sympatoche, sans passer par du flash.
Pour ce faire, j'ai deux div sur lesquels j'ai appliqué (via CSS) une transformation de ce type :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
-moz-transform: rotate(-15deg) skew(-15deg,-15deg);

Lors d'un OnMouseOver, la div reprend un angle et un skew de 0°, ainsi qu'un scale x 2.
Lors d'un OnMouseOut, la div reprend son aspect "perspective".

Mais j'aimerais que, par exemple, le scale ne passe pas de 1 à 2 lors de l'entrée de la souris.
J'aimerais qu'il s'incrémente (un peu à la manière des transitions effectuées par JQuery) plus ou moins doucement.

J'ai tenté d'appeler une fonction toutes les X millisecondes, incrémentant ma variable entre 1 et 2, mais le résultat est plus qu'aléatoire...
Ce n'est pas fluide, parfois toutes mes boxs ont leur valeur qui augmentes...

Y existe il un moyen de rendre le tout plus propre?

Merci

[SpaceFrog]

peut être avec des fonctions d'animation du type de celle de jquery et son plugin ease...

[themoye]

Alu SpaceFrog, merci pour ta réponse.

Oui, c'est pas faux, j'ai pensé à utiliser JQuery avec la fontion .animate()

Mais je ne sais pas sur quelles propriétés CSS cette fonction peut marcher...

Quand au plugin ease, je ne connais pas, je vais de ce pas faire une recherche