使用
keyframes，一旦元素插入到DOM中，就可以对其进行动画处理。下面是一些CSS示例：
@-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;}
}
#Box {
-webkit-animation: fadeIn 500ms;
-moz-animation: fadeIn 500ms;
animation: fadeIn 500ms;
}
有没有一些类似的功能可用于应用动画(通过CSS，没有JavaScript)到元素之前它被从DOM中删除？下面是一个jsFiddle我玩这个想法;如果你知道一个解决方案，随意叉。
jsFiddle – http://jsfiddle.net/skoshy/dLdFZ/
解决方法
创建另一个CSS动画，称为fadeOut，说。然后，当您要删除元素时，将元素的动画属性更改为新动画，并使用animationend事件触发动画完成后实际删除的元素：
$('.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.这对我在Safari，至少。
嗯，你应该使用一个类，而不是.css()。
我不认为jQuery有任何“真正的”支持CSS动画，所以我不认为你可以摆脱webkitAnimationEnd。在Firefox中，它只是叫animationend。
我确定没有办法在CSS中做到这一点。
