CSS3 - Transition on DOM Removal

http://stackoverflow.com/questions/7000648/css3-transition-on-dom-removal

HTML

<p class="show">
    Click me to create the div (CSS animation will fade it in)
</p>


<p class="hide disabled">
    Click me to delete the div (can a CSS animation be applied?)
</p>


<div id="container"></div>

CSS

/* Relevant CSS Portion - #fill */

@-moz-keyframes fadeIn {
    from {opacity:0;}
    to {opacity:1;}
}

@-webkit-keyframes fadeIn {
    from {opacity:0;}
    to {opacity:1;}
}

@keyframes fadeIn {
    from {opacity:0;}
    to {opacity:1;}
}
@-moz-keyframes fadeOut {
    from {opacity:1;}
    to {opacity:0;}
}

@-webkit-keyframes fadeOut {
    from {opacity:1;}
    to {opacity:0;}
}
@keyframes fadeOut {
    from {opacity:1;}
    to {opacity:0;}
}

#fill {
    -webkit-animation: fadeIn 500ms;
    -moz-animation: fadeIn 500ms;
    animation: fadeIn 500ms;
    background-color: yellow;
    width: 100%;
    height: 100%;
}

/* Not very important - Styling */

.show {
    border: 1px solid #28B544;
    background-color: #9BF2AC;
}

.hide {
    border: 1px solid #B52828;
    background-color: #F7A3A3;
}

.disabled {
    border: 1px solid #ccc;
    background-color: #eee;
    color: #aaa;
}

body {
    font-family: "Tahoma", "Arial", sans-serif
}

p {
    padding: 10px;
    margin: 0 0 10px 0;
    display: inline-block;
    cursor: pointer;
}

#container {
    width: 300px;
    height: 300px;
    border: 1px solid #ccc;
}

JavaScript

$('.show').click(function() {
    if (!$(this).hasClass('disabled')) {
        $('#container').append('<div id="fill"></div>');
        $('.show, .hide').toggleClass('disabled');
    }
});


$('.hide').click(function() {
    if (!$(this).hasClass('disabled')) {
        $('#fill').css('-webkit-animation', 'fadeOut 500ms');
        $('#fill').bind('webkitAnimationEnd',function(){
            $('#fill').remove();
            $('.show, .hide').toggleClass('disabled');
        });
    }
});