css3アニメーションの終了を知る方法

Question

アニメーションが終了したら、htmlオブジェクトからCSSクラスを変更または削除するにはどうすればよいですか？私あなたがこのためにJavascriptを必要とする...アニメーションが終了したときにdiv要素を削除する

.loginAnimado 
{   
    width:100px; 
    height:100px; 
    background:#F2F2F2; 
    position:relative;    
    -webkit-animation:mymove 1s 1; /* Safari and Chrome */ 
} 

@-webkit-keyframes mymove /* Safari and Chrome */ 
{ 
    from 
    {      
    } 

    to 
    {   
     opacity: 0.0;  
     -webkit-transform: scale(2) rotate(0deg) translate(0px, 0px) skew(0deg, 0deg);    
     display:none; 
    } 
} 

Answer 1

をしたいと思い、それはjQueryを使って簡単です...

$(document).ready(function(){ 
    $('.loginAnimado').bind("webkitAnimationEnd mozAnimationEnd msAnimationEnd oAnimationEnd animationEnd", function(){ 
    $(this).removeClass('loginAnimado'); 
    }); 
}); 

Answer 2

大文字と小文字が区別されanimationendイベント、ブラウザによって異なります。公式仕様はすべて小文字ですが、さまざまなブラウザの接頭辞も実装が異なります。

Mozilla: mozAnimationEnd 
Webkit: webkitAnimationEnd 
Opera: oanimationend 
IE: MSAnimationEnd 
W3C: animationend 

live exampleを参照してください。

Answer 3

現在のところ、Chromeでアニメーションの回答が2回発生しています（jQuery 1.7以降の優先メソッドが.onになった時点で.bindが使用されています）。これはおそらくwebkitAnimationEndとanimationEndを認識しているためです。以下は確実に一度だけ発生します：

/* From Modernizr */ 
function whichTransitionEvent(){ 

    var el = document.createElement('fakeelement'); 
    var transitions = { 
     'animation':'animationend', 
     'OAnimation':'oAnimationEnd', 
     'MSAnimation':'MSAnimationEnd', 
     'WebkitAnimation':'webkitAnimationEnd' 
    }; 

    for(var t in transitions){ 
     if(transitions.hasOwnProperty(t) && el.style[t] !== undefined){ 
      return transitions[t]; 
     } 
    } 
} 

$("#elementToListenTo") 
    .on(whichTransitionEvent(), 
     function(e){ 
      // What you want to do here 
      $('.loginAnimado').removeClass('loginAnimado'); 
      $(this).off(e); 
     });