Paulo Mendonça Paulo Mendonça - 4 months ago 9
CSS Question

how to know when css3 animation ends

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

You need Javascript for this, it's easier with jQuery...

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