CSS3 Rotation Snapback

[martinj]

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:\[code\] #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);}}\[/code\]im thankful for any help!