How to make a CSS animation slow to a stop on hover out?

Question

I have a CSS animation that rotates a div infinitely when I hover over it. The CSS looks something like this:

@-webkit-keyframes rotate {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}

#square {
    background-color: #369;
    height: 100px;
    margin: 50px;
    width: 100px;
    -webkit-transform: rotate(0deg);
}

#square:hover {
    -webkit-animation: rotate 5s linear infinite;
}

The problem that I'm trying to solve is that when I hover out, it abruptly jumps back to its original state. This can be jarring when it's in the middle of the animation. Is there a way to slowly transition back to the original state? Normally, you can do that sort of thing with transitions, but it doesn't seem to work in conjunction with animations. For example, I tried adding -webkit-transition: all 2s; to the #square selector in the example above, but it didn't do anything.

Example: http://jsfiddle.net/93jeS/

Answer 1

I spent a few hours on this one and think I've finally got it.

Here is a link to the JSFiddle

Essentially #square gets the CSS attribute of animation-name:rotate; added to it on hover to initiate the infinite rotation. Then another function that fires on a mouseout adds an event listener to animationiteration so that when the animation iterates it can cease the rotation. To end the rotation the #square gets the CSS attribute of animation-name:none;. Finally, #square is replaced with a clone of itself to allow the behaviour to repeat after it has been through one cycle of the hover and mouseout.

$('#square').hover(function() {
  $(this).css('-webkit-animation-name', 'rotate');
});

$('#square').mouseout(function() {
  $(this).on('animationiteration', function() {
    $(this).css('-webkit-animation-name', 'none');
    $(this).replaceWith($(this).clone(true));
  });
});

Additionally

This Fiddle though slightly temperamental may be a partial solution to adding a nice ease-out effect. I just modified the CSS with a :hover selector to toggle the linear and ease-out attributes.