Simon Edström Simon Edström - 1 month ago 25
CSS Question

CSS3 animation repeat transform effect

I want to create an animation effects which sort of "shakes" an image on hover. Its like the iPhone effects that appers when you hold down an App for some seconds and all Apps starts to shake.

It would be nicest if it was possible by using pure CSS3 but if its not possible I can use Javascript/jQuery also.

So what have do I got so far? Its just a one way rotation using pure CSS:

img:hover {
-webkit-transform: rotate(3deg);
-webkit-transition: all 0.5s ease-in-out;
}‚Äč


http://jsfiddle.net/27UeT/

About browser compatibility the only requirement is that it should work for Chrome.

Answer

Thanks to m90 link I came up with this code:

http://jsfiddle.net/27UeT/1/

img:hover {

    -webkit-animation-name: thumb;
    -webkit-animation-duration: 1000ms;
    -webkit-transform-origin:50% 50%;
    -webkit-animation-iteration-count: infinite; /* The magic keyword for infinite*/
    -webkit-animation-timing-function: linear;
}

@-webkit-keyframes thumb {
    0% { -webkit-transform: rotate(3deg); }
    50% { -webkit-transform: rotate(-3deg); }
    100% { -webkit-transform: rotate(3deg); }
}
Comments