CSS回転アニメーションが停止します

Question

私はorbitアニメーションをトリガするクラス.orbitを持っています。クラスを削除して回転を止めます。要素が元の位置にリセットされます。

要素をそのままにして、トラック内で回転アニメーションを停止する方法はありますか？

現在、ポジションを取得して設定していますが、完璧ではありません。

https://jsfiddle.net/f4hnz2va/2/

#errordot{ 
    position:absolute; 
    top:0; 
    left:0; 
    width:50px; 
    height:50px; 
    background:red; 
    border-radius:50%; 
    font-size:40px; 
} 
#errorsun{ 
    width:200px; 
    height:200px; 
    position:absolute; 
    top:50px; 
    left:50px; 
} 
.orbit { 
    -webkit-animation-iteration-count:infinite; 
    -webkit-animation-timing-function:linear; 
    -webkit-animation-name:orbit; 
    -webkit-animation-duration:5s; 
} 

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

Answer 1

必要なもの軌道のアニメーションを "停止" が、CSS3 animation-play-stateプロパティを使用して、それを "一時停止" ではありません。永続的に一時停止し、再開しない場合は、マーク変数（「hasPaused」など）を適用できます。

サンプルjsfiddleがで見つけることができます：修正して、 https://jsfiddle.net/cshao/1kb8cm7j/1/