CODEWITHSUNDEEP
css
Paulo Mendonça
Paulo Mendonça

Reputation: 643

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;
    }
}

Upvotes: 1

Views: 4523

Answers (3)

Chuck Le Butt
Chuck Le Butt

Reputation: 48758

The accepted answer currently fires twice for animations in Chrome (it also uses .bind when the preferred method since jQuery 1.7 is now .on). Presumably this is because it recognizes webkitAnimationEnd as well as animationEnd. The following will definitely only fires once:

/* 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);
        });

Upvotes: 1

scurker
scurker

Reputation: 4753

The animationend events are case sensitive, and vary from browser to browser. The official spec is all lowercase, though the various browser prefixes even vary in their implementation too.

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

See this jsfiddle for a live example.

Upvotes: 7

methodofaction
methodofaction

Reputation: 72395

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

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

Upvotes: 3

Related Questions