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

css

Solution

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.

Problem

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/

Original source