cssanimationwebkit-animation

CSS3 animation fadeOut

I'm trying to dissappear Bootstrap Alert after 3seconds. I made it, but it just dissapears and keeps the height of div. Can I remove that div with CSS only? I tried display:none; and it also didn't work. I need help.

This is what I did:

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>

Thanks in advance

Solution

  • Give this a try!

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