[Java script et CSS3] Une animation fluide?
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:
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 :)