cssで回転アニメーションを停止する

Question

ボタンklickのやり取りなしに、アニメーション（css）をランダムな位置でスムーズに停止する方法を知りたい。

span.glyphicon-arrow-up { 
position: absolute; 
top: 31%; 
left: 36%; 
margin:-60px 0 0 -60px; 
-webkit-animation:spin 2s linear infinite; 
-moz-animation:spin 2s linear infinite; 
animation-iteration-count: 2; 
animation:spin 2s linear infinite; 
font-size: 14.0em; 

@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } } 
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } } 
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } } 

私はあなたが私を助けることを願っています。 （私は、javascriptについて何か知っていません）

Answer 1

最初に、アニメーションを適用するための2番目のCSSクラスを作成します。次に、getComputedStyleを使用して、&を計算して、要素の回転を設定し、イベントがトリガーされたときにアニメーションクラスを削除します。どのようにイベントを引き起こすかはあなた次第です。高速のために&のシンプルさのために、私はちょうどclickイベントを使用しましたが、ランダムに生成された遅延でタイムアウトを設定して、ユーザーとのやりとりなしにトリガーすることができます。私はまたに設定するちょうどtransformプロパティをサポートしていないブラウザのフォールバックを含んでいます。私は、任意のブラウザではまだ前置するtransformプロパティを必要とすることインストールされていないマシンで、現在よ

document.querySelector("div").addEventListener("click",function(){ 
 
    this.style.transform=window.getComputedStyle(this).getPropertyValue("transform")||"initial"; 
 
    this.classList.remove("spin"); 
 
});

div{ 
 
    background:#000; 
 
    height:50px; 
 
    width:50px; 
 
} 
 
.spin{ 
 
    animation:spin 2s linear infinite; 
 
} 
 
@keyframes spin{ 
 
    to{ 
 
    transform:rotate(360deg); 
 
    } 
 
} 
 
body,html{height:100%;}body{align-items:center;display:flex;justify-content:center;}

<div class="spin"></div>

注意。私のテストでは、接頭辞付きのプロパティは接頭辞付きでないものにgetComputedStyleで翻訳されていましたが、それが機能の機能であるのかブラウザに接頭辞付きのバージョンが必要ないのか分かりません。接頭辞としてtransformが必要なブラウザではこれが動作しないことがわかった場合は、さらにフォールバックを行う必要があります。以下は、あなたが必要な場合があります完全なリストが含まれるように編集されたJavaScript関数です：今まであなたがこの記事http://www.w3schools.com/cssref/css3_pr_animation-iteration-count.aspをチェックする必要数えるものに無限の

document.querySelector("div").addEventListener("click",function(){ 
    var style=window.getComputedStyle(this); 
    this.style.transform=style.getPropertyValue("transform")||style.getPropertyValue("-webkit-transform")||style.getPropertyValue("-ms-transform")style.getPropertyValue("-moz-transform")||"initial"; 
    this.classList.remove("spin"); 
});