Jak spowolnić animację CSS do zatrzymania po najechaniu kursorem myszy?

Question

Mam animację CSS, która obraca div w nieskończoność, po najechaniu na niego. CSS wygląda mniej więcej tak:

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

Problem, który próbuję rozwiązać jest to, że kiedy unoszą się, że nagle powraca do stanu pierwotnego. Może to być wstrząsające, gdy znajduje się w środku animacji. Czy istnieje sposób na powolne przejście do stanu oryginalnego? Zwykle możesz robić tego rodzaju rzeczy z przejściami, ale wydaje się, że nie działają one w połączeniu z animacjami. Na przykład próbowałem dodać -webkit-transition: all 2s; do selektora #square w powyższym przykładzie, ale nic nie zrobił.

Przykład: http://jsfiddle.net/93jeS/

Answer 1

spędziłem kilka godzin na tym i myślę, że już w końcu dostał.

Tu jest link do JSFiddle

Zasadniczo #square dostaje atrybut CSS animation-name:rotate; dodaną do niej przy aktywowaniu zainicjować nieskończoną rotację. Następnie inna funkcja uruchamiająca się na mouseout dodaje detektor zdarzeń do animationiteration, tak że gdy animacja będzie iterować, może zakończyć rotację. Aby zakończyć obrót, #square otrzymuje atrybut CSS animation-name:none;. Ostatecznie, #square zostaje zastąpiony przez własny klon, aby umożliwić powtórzenie zachowania po przejściu przez jeden cykl hover i 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)); 
    }); 
}); 

Dodatkowo

This Fiddle choć nieco wybuchowy może być częściowe rozwiązanie dodanie przyjemny efekt łatwość zewnątrz. Właśnie zmodyfikowałem CSS za pomocą selektora: hover, aby przełączać atrybuty linear i ease-out.