Css关键帧+不透明度：0完成后会返回div

Question

我在点击文档时使用关键帧来模糊和淡出div，我无法弄清楚为什么动画结束后div再次可见......

CSS

#red{
    width:200px;
    height:200px;
    margin:50px;
    background:red;
}
.blur{
    -webkit-animation: fadeout linear 2.5s;
}
@-webkit-keyframes fadeout {
   0% {    -webkit-filter: opacity(100%) blur(0px);}
  50% { -webkit-filter: opacity(100%)  blur(10px);}
 100% {  -webkit-filter: opacity(0%) blur(20px);}
}

JS

$(document).click(function(){
    $('#red').addClass('blur');
});

有更好的方法吗？ 这是一个jsFiddle

Answer 1

你会想要使用 动画填充模式：前锋;在CSS动画结束时保持最终状态。