CSS3动画fadeOut

Question

我试图在3秒后消除Bootstrap Alert。我做到了，但它只是消失并保持div的高度。我可以只用CSS删除那个div吗？我尝试过 display：none; ，但它也没有用。我需要帮助。

这就是我所做的：

CSS：

.alert-success {
    -webkit-animation: fadeOut 3s linear forwards;
    animation: fadeOut 3s linear forwards;
}


@-webkit-keyframes fadeOut {
    0%   {opacity: 1;}
    70%  {opacity: 1;}
    90% {opacity: 1;-webkit-transform: translateY(0px);}
    100% {opacity: 0;-webkit-transform: translateY(-30px);}
}

HTML：

<div class="alert alert-success">
   Well done! You successfully read this important alert message.
</div>

提前致谢

Answer 1

试一试！

的jsfiddle：

http://jsfiddle.net/Q9kYa/9/

#alert-success{
    background-color: #FF0000;
    animation:alert-success 0.5s 1;
    -webkit-animation:alert-success 0.5s 1;
    animation-fill-mode: forwards;

    animation-delay:2s;
    -webkit-animation-delay:1s; /* Safari and Chrome */
    -webkit-animation-fill-mode: forwards;

} 

@-webkit-keyframes alert-success{
    0%   {opacity: 1;}
    70%  {opacity: 1;}
    90% {opacity: 1;-webkit-transform: translateY(0px);}
    100% {opacity: 0;-webkit-transform: translateY(-30px);}
}