CSS3 animation fadeOut

Question

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

score 4 · Accepted Answer · answered Jun 22 '14 at 21:25

4

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

answered Jun 22 '14 at 21:25

imbondbaby

6,351
3
21
54

If you check this one: http://jsfiddle.net/Q9kYa/12/ I want blue line go up after red line dissappears. – Alpan Karaca Jun 22 '14 at 21:27
You will have to use JQuery... is that okay? I will make it really simple for you – imbondbaby Jun 22 '14 at 21:41
I know how to do it with jQuery. I don't want to use it. I want to solve this with CSS only. – Alpan Karaca Jun 22 '14 at 21:42
How about sliding it up with css only? instead of fading? – imbondbaby Jun 22 '14 at 21:46
I made it using "margin-top:-20px;" and it worked, but this is not a valid solution I guess right? Thank you for trying, if you find a better way please tell me. For now look at this: http://jsfiddle.net/Q9kYa/17/ – Alpan Karaca Jun 22 '14 at 21:50
Yes, it does work :) I think that would solve your issue and it is not a bad workaround. Will let you know if I get anything better to work :) – imbondbaby Jun 22 '14 at 21:54

CSS3 animation fadeOut

1 Answers1