Animation -> balancier (skater)

by iamvdo

HTML

<div>
    <img src="http://dev.iamvdo.me/skater.png" alt="" />
</div>

CSS

div{
/*sert juste pour aligner*/
text-align:center;
padding-top:50px;
}

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

/*definition de l'animation */
@-webkit-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);}
}