CSS 3 eases out without ease-out - animation

Question

http://jsfiddle.net/wX6eU/
The rotation eases in and out even though I don't specify the out parameter. How can I make it stay at 360 or just go back to 0 without any animation?
div {
position: absolute;
left: 100px;
top: 100px;
width: 100px;
height: 100px;
background-color: blue;
-webkit-transition:-webkit-transform 0.5s ease-in;
}
div:hover {
-webkit-transform:rotate(360deg);
}

Answer 1

Just place the transition within the :hover pseudo-selector:
div {
position: absolute;
left: 100px;
top: 100px;
width: 100px;
height: 100px;
background-color: blue;
}
div:hover {
-webkit-transform:rotate(360deg);
-webkit-transition:-webkit-transform 0.5s ease-in;
}
http://jsfiddle.net/DgBDt/

Answer 2

I don't believe it's possible to set the timing on the "out" differently than the "in". The ease-in option is the timing function. Other options are default, linear, ease-out, ease-in-out, and cubic-bezier. You can read more about them here, but there isn't any information on setting the transition-out to zero seconds, unfortunately.
An alternate option might be to use JS to get the functionality you want and still use the CSS animation:
$(function(){
var timer;
$('.animated').hover(function(){
timer = setTimeout(function(){ $('.animated').removeClass('animated') }, 500)
}, function(){
clearTimeout(timer);
$(this).addClass('animated');
});
});