CSS3 Spin Animation: spin back when unhovering - css

Question

I have this code that spins an image when hovering:
img:hover {
-webkit-animation-name: spin;
-webkit-animation-duration: .15s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
-moz-animation-name: spin;
-moz-animation-duration: .15s;
-moz-animation-iteration-count: 1;
-moz-animation-timing-function: linear;
-ms-animation-name: spin;
-ms-animation-duration: .15s;
-ms-animation-iteration-count: 1;
-ms-animation-timing-function: linear;
animation-name: spin;
animation-duration: .15s;
animation-iteration-count: 1;
animation-timing-function: linear;
}
#-ms-keyframes spin {
from { -ms-transform: rotate(0deg); }
to { -ms-transform: rotate(360deg); }
}
#-moz-keyframes spin {
from { -moz-transform: rotate(0deg); }
to { -moz-transform: rotate(360deg); }
}
#-webkit-keyframes spin {
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(360deg); }
}
#keyframes spin {
from {
transform:rotate(0deg);
}
to {
transform:rotate(360deg);
}
}
http://jsfiddle.net/79FHN/1/
I want it to spin to the other direction when un-hovering.
How can I do this?

Answer 1

I can refactor your code to great extent, all you need is
Demo
img {
-webkit-transition: 1s linear;
transition: 1s linear;
}
img:hover {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
The issue with your code was, that you were using #keyframes which are nothing but animation, so once it triggers, you need to write a separate keyframe for reversing. As your animation was not so complex, I preferred using simple CSS3 properties to get the job done.
If you feel the animation nudges your icon or you deliberately want to nudge on hover, you can use transform-origin property.
Thanks to #Second Rikudo for pointing out the linear issue.