CSSアニメーションを回転させる停止スムーズ

Question

私は画像を無期限roateために、このサンプルのCSSクラスを作成しました：

.rotate{ 
    animation: rotation 2s infinite linear; 
} 

@keyframes rotation { 
    from { 
     transform: rotate(0deg); 
    } 
    to { 
     transform: rotate(359deg); 
    } 
} 

私は私のhtmlページ内の画像には、このクラスを追加します。まもなく私は未知のキーフレームから円滑に回転を停止したい。

.rotateToStop{ 
    ... 
} 

をしてJavaScriptコードから：私はそのような別のCSSクラスを作成する必要があります

$('myelement').addClass('rotate'); 
// ... 
// shortly after, when an specific event is triggered 
$('myelement').removeClass('rotate'); 
$('myelement').addClass('rotateToStop'); 

が、私は、私はCSSの「rotateToStop」クラスで行う方法ではない任意のアイデアを持っている、誰かが私を助けることができます？ =）

Answer 1

クラスを削除して要素からアニメーションを削除するだけでアニメーションをスムーズに止めることはできません。

しかし、あなたは、この使用してアニメーションを停止することができます：あなたは.rotateクラスを削除するが、開始したり、アニメーションを一時停止したクラスをトグルする必要はありません。この場合

.rotateToStop { 
    animation-play-state: paused; 
} 

を。

1つの問題：アニメーションは、必要なクラスを追加した瞬間に正確にフリーズします。