Question

How do I change or remove a css class from a html object, when the animation ends? I would like to remove a div when the animation ends…

.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

You need Javascript for this, it’s easier with jQuery…

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