Question

32

css3 fade in on page load, out after seconds

rated 0 times [ 33] [ 1] / answers: 1 / hits: 29054 / 11 Years ago, thu, february 13, 2014, 12:00:00

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>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

kelleyamiahk

Add To Favorites

Follow

Total Points: 216

Total Questions: 113

Total Answers: 119

Location: Serbia

Member since Tue, Jul 26, 2022

2 Years ago

answered 11 Years ago emerald · Accepted Answer

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