CSS Rotate Icon Animation

Question

How do I archive the following using CSS?

1.Rotates image A multiple times then switch to image B when the mouse positions on the image.

2.Rotates back to image A when mouse clicks or leave the image.

Thanks

Answer 1

You can do what you want by using CSS transform and transition properties. It's really easy, but you'll need to use a div with background-image instead of an img tag:

div{
    width:50px;
    height:50px;
    background:url("normalImage.png");
    transition:2.5s; /* Transition duration */
}
div:hover{
    background:url("imageThatAppearsAfterHovering.png");
    -o-transform:rotate(720deg);
    -ms-transform:rotate(720deg);
    -moz-transform:rotate(720deg);
    -webkit-transform:rotate(720deg);
    transform:rotate(720deg); /* How many times it'll rotate = degrees÷360 */
}

JSFiddle Demo

JSFiddle Demo using ultra high speeds