html - javascriptでcssアニメーションを1回繰り返す

Question

javascript で CSS アニメーションを 1 回繰り返すことができないのはなぜですか?

フィドル: http://jsfiddle.net/6XtSa/

Answer 1

クラスの使用を提案した削除された回答から適応された例を次に示します。アニメーションは無限に実行されたため、その答えは完全には正しくありませんでした。

アイデアは、クラスを追加して、イベントが発生clickしたときに削除することです。animationend

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

#button.animating {  
    -webkit-animation-name: rotate;  
    -webkit-animation-timing-function: linear;  
    -webkit-animation-duration: 1s; 
}

var btn = document.getElementById('button');

btn.addEventListener('click', function() {
    this.className = 'animating';
});
btn.addEventListener('webkitAnimationEnd', function(){
    this.className = '';
});

http://jsfiddle.net/AndyE/9LYAT/

Answer 2

ボタンが1回だけ回転する理由は、 360°回転するのではなく、回転するためです。絶対値です。再度回転させるには、360°から720°まで回転させる必要があります。この投稿をご覧になることをお勧めします： jQueryでDiv要素を回転させ 、具体的には、回答の1つでこのjsfiddleを回転させます：http：//jsfiddle.net/uLrVy/

Answer 3

次のようなものを試すことができます: http://jsfiddle.net/6tZd3/

Safari CSS Visual Effects Guideによると、イベントをリッスンしwebkitTranstionEndて、アニメーションが終了したことを通知することができます。その時点で、JavaScript でアニメーション化せずにアニメーションをリセットできます。