Jquery - Apply Style on CSS Animation End

Question

How would I use jQuery to determine when a CSS animation for an element has ended and then apply a new style to that element? Here is my non-functional code below.

$("#icon").jQuery.Event("webkitAnimationEnd", function(event){
    ('#icon').css('opacity', '1');
}); 

Answer 1

I think actually what you are looking for is the .bind() method:

$("#icon").addClass('thisClassWillApplyMyCSSAnimation').bind('animationend webkitAnimationEnd MSAnimationEnd oAnimationEnd', function(e){
    //DO WHATEV
    $('#icon').css('opacity', '1');
}); 

Answer 2

You can use one()

$("#icon").one('animationend webkitAnimationEnd MSAnimationEnd oAnimationEnd', function(e) {
    //Your css
    $('#icon').css('opacity', '1');
});