Animation Css3

Bonjour à tous,

Je voulais vous demander de l'aide sur une animation que je souhaiterai faire en Css3, il s'agit du mouvement de va et vient du bonhomme bleu:

http://dl.dropbox.com/u/34584750/header_jap.swf

Pouvez-vous m'aider ?

Hello,
Tu peux t'inspirer de ce tuto que j'ai fais il y a quelques temps:Animation CSS3

L'anim que tu veux réaliser est une rotation dont le centre se situe quelque part vers l'angle haut droit. (transform:rotate... + tranform-origin)

A+
Modifié par vdo93 (09 Nov 2011 - 18:06)

Merci pour cette réponse, mais j'avoue ne pas m'en sortir

Quelqu'un aurait-il un exemple ?

Hello,
Voila un exemple, tu peux t'en inspirer...:

<div><img src="" alt="" /></div>

img{
/*on modifie l'axe de transformation :
  (positionne l'axe sur la main gauche)*/    
transform-origin:50% 35%;
/*lance l'animation en boucle*/
animation:anim 2s ease infinite;
}

/*definition de l'animation */
@keyframes anim{
    /*d'un angle de 30degres*/
    from{-webkit-transform:rotate(30deg);}
    /*en passant a un angle de 40degres*/
    50%{-webkit-transform:rotate(40deg);}
    /*et en finissant par un angle a 30degres*/
    to{-webkit-transform:rotate(30deg);}
}

Tu peux voir la démo en ligne ici (avec webkit): http://jsfiddle.net/iamvdo/Zt3ST/
Modifié par vdo93 (17 Nov 2011 - 18:31)