i have been searching around stackoverflow for an answer for a while but it seems to me this isn't been questioned before.

excuses if i might have missed the answer somewhere but here it goes:

So i am working on a page that fades in a div on page load, now i want to fade it out after a few seconds. i can't seem to find the right way to get this done.

@-webkit-keyframes fadein {
from {
opacity:0;
}
to {
opacity:1;
}
}
@-webkit-keyframes fadeout {
from {
    opacity:1;
}
to {
    opacity:0;
}
}
div {
width: 400px;
margin: 0 auto;
text-align: center;
-webkit-animation:fadein 1s;
-webkit-animation:fadeout 1s;
-webkit-animation-delay:fadeout 5s;
}

The html:

 <div>
 <h1><font size="+6"> :(</font></h1><br />
 <h1>Whoops<span>Something went wrong</span></h1><br />
 <h1><span><div id="timer_div">you will be redirected in</div> seconds</span></h1>
 </div>

i have been searching around stackoverflow for an answer for a while but it seems to me this isn't been questioned before.

excuses if i might have missed the answer somewhere but here it goes:

So i am working on a page that fades in a div on page load, now i want to fade it out after a few seconds. i can't seem to find the right way to get this done.

@-webkit-keyframes fadein {
from {
opacity:0;
}
to {
opacity:1;
}
}
@-webkit-keyframes fadeout {
from {
    opacity:1;
}
to {
    opacity:0;
}
}
div {
width: 400px;
margin: 0 auto;
text-align: center;
-webkit-animation:fadein 1s;
-webkit-animation:fadeout 1s;
-webkit-animation-delay:fadeout 5s;
}

The html:

 <div>
 <h1><font size="+6"> :(</font></h1><br />
 <h1>Whoops<span>Something went wrong</span></h1><br />
 <h1><span><div id="timer_div">you will be redirected in</div> seconds</span></h1>
 </div>

• javascript
• jquery
• html
• css

• project – Ioncap Commented Feb 13, 2014 at 11:08

4 Answers 4

Your issue stems from applying two animations at once that you actually want to run in sequence. To get this working reliably you have two options:

CSS only: http://jsfiddle.net/marionebl/M9LR6/

Note opacity: 0; to keep the message hidden when the animation completes. Plus: This won't work in IE <= 9, it does not support keyframe animations: http://caniuse.com/#feat=css-animation

@keyframes fadeInOut {
    0% {
        opacity: 0;
    }
    16% {
       opacity: 1;
    }
    84% {
       opacity: 1;
    }
    100% {
       opacity: 0;
    }
}

.message {
    width: 400px;
    margin: 0 auto;
    opacity: 0;
    text-align: center;
   -webkit-animation: fadeInOut 6s;
   animation: fadeInOut 6s;
}

Involving JS: http://jsfiddle.net/marionebl/P26c9/1/

Is somewhat more flexible and easier to change, supports IE9.

CSS:

@-webkit-keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@-webkit-keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}
@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

.fadeIn {
    -webkit-animation: fadeIn;
    animation: fadeIn;
    opacity: 1;
}

.fadeOut {
    -webkit-animation: fadeOut;
    animation: fadeOut;
    opacity: 0;
}

.fast {
    -webkit-animation-duration: 1s;
    animation-duration: 1s
}

.message {
    width: 400px;
    margin: 0 auto;
    text-align: center;
}

JS:

var $message = $('.message');
$message.addClass('fadeIn fast');

setTimeout(function(){
   $message.removeClass('fadeIn').addClass('fadeOut');
}, 5000);

You should use only one animation for an element: http://jsfiddle.net/maximgladkov/YR5UM/

@-webkit-keyframes fade {
    0% {
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

div {
    width: 400px;
    margin: 0 auto;
    text-align: center;
    -webkit-animation: fade 6s;
    -webkit-animation-fill-mode: both;
}

Have you tried a delay in this form?

transition-delay: 2s;
-webkit-transition-delay: 2s; /* Safari */

or:

animation-delay:2s;
-webkit-animation-delay:2s; /* Safari and Chrome */

Use Jquery animate.

$(document).ready(function(){
$('.div').delay(2000).animate({opacity:100},1000)
})

This will delay for 2 seconds when the page loads and then the div will fade in.