Come rendere l'animazione CSS rallentata fino a fermarsi al passaggio del mouse?

Question

Ho un'animazione CSS che ruota di un div infinitamente quando passo il mouse su di essa. Il CSS simile a questa:

@-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; 
} 

Il problema che sto cercando di risolvere è che quando mi passa il mouse fuori, salta bruscamente al suo stato originale. Questo può essere stridente quando è nel bel mezzo dell'animazione. C'è un modo per lentamente transizione allo stato originale? Normalmente, puoi fare questo genere di cose con le transizioni, ma non sembra funzionare in congiunzione con le animazioni. Ad esempio, ho provato ad aggiungere -webkit-transition: all 2s; al selettore #square nell'esempio sopra, ma non ha fatto nulla.

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

Answer 1

ho trascorso un paio d'ore su questo e credo di aver finalmente capito.

Ecco un link al JSFiddle

Essenzialmente #square ottiene l'attributo CSS di animation-name:rotate; aggiunto ad esso al passaggio del mouse per avviare la rotazione infinita. Quindi un'altra funzione che si attiva su un mouseout aggiunge un listener di eventi a animationiteration in modo che, quando l'animazione itera, possa interrompere la rotazione. Per terminare la rotazione, lo #square ottiene l'attributo CSS di animation-name:none;. Infine, #square viene sostituito con un clone di se stesso per consentire al comportamento di ripetere dopo aver attraversato un ciclo di hover e 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)); 
    }); 
}); 

Inoltre

This Fiddle se leggermente temperamentale può essere una soluzione parziale aggiungendo un piacevole effetto facilità-out. Ho appena modificato il CSS con un: hover selector per alternare gli attributi linear e easy-out.