CSS3 - Transition on DOM Removal

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

HTML

<div class="test">

</div>

<div class="click">
klik
</div>
<div class="remove">
usun
</div>

CSS

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

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

.test {
  width: 100px;
  height: 100px;
  display: none;
  background: red;
  animation: fadeIn 2000ms;
}
.click {
  margin-bottom: 20px;
}

JavaScript

$('.click').click(function() {
        $('.test').show();
});

$('.remove').click(function() {
        $('.test').css('animation', 'fadeOut 2000ms');
        $('.test').bind('animationend',function(){
            $('.test').hide();
        });
});