CSS3 – Transition on DOM Removal

Create another CSS animation called fadeOut, say. Then when you want to remove the element, change the animation property on the element to that new animation, and use the animationend event to trigger the actual removal of the element once the animation is done:

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

See also my updated version of your jsFiddle. That works for me in Safari, at least.

Well, you should be using a class instead of that .css().

I don’t think jQuery has any “real” support for CSS animations yet, so I don’t think you can get rid of that webkitAnimationEnd. In Firefox it’s just called animationend.

I’m pretty sure there’s no way to do this in just CSS.