css3 fade in on page load, out after seconds

Question

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 som

Answer 1

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

Answer 2

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.

Answer 3

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

Answer 4

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 */