CSS3 动画淡出

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);}
}