CSS3 Rotation Snapback

Question

I am trying to create a little fun toy to play with on my website, basically whenever you hover the logo, it rotates until you remove the cursor. I have achieved this by using rotate in CSS3, and it is working. But i was wondering if there is a way to prevent the "Snapback" (Smoothly bring it back to its original position when you unhover instead of it just jumping back instantly)

The code i am using is this:

    #logo1:hover{
    -webkit-animation: spin 0.7s infinite linear;
-moz-animation: spin 0.7s infinite linear;
-o-animation: spin 0.7s infinite linear;
-ms-animation: spin 0.7s infinite linear;
}
@-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg);}
100% { -webkit-transform: rotate(360deg);}
}
@-moz-keyframes spin {
0% { -moz-transform: rotate(0deg);}
100% { -moz-transform: rotate(360deg);}
}
@-o-keyframes spin {
0% { -o-transform: rotate(0deg);}
100% { -o-transform: rotate(360deg);}
}
@-ms-keyframes spin {
0% { -ms-transform: rotate(0deg);}
100% { -ms-transform: rotate(360deg);}
}

im thankful for any help!

Answer 1

What you are trying can be easily accomplished by simply using CSS3 transforms, animation is not required here as you are starting from 0 to 360 deg so try this

.class {
   -moz-transform: rotate(0deg);
   /* Add up other required proprietary properties here */
   transition: all 1s; /* This will handle the transition to be 
                          smooth on mouse out */
}

.class:hover {
   -moz-transform: rotate(360deg);
   /* Add up other required proprietary properties here and 
      transition property is not required here */
}