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>
Add CSS. Add @keyframes with the name "slideInLeft" and use 0% and 100% as a starting point and ending point of the animation, respectively. Then, specify the transform property for each of them. Use the animation property on the <header> and specify its background and padding.
The CSS animation-delay property has the following syntax: animation-delay: [time] | initial | inherit; As you can see, there are three possible values: time, initial, and inherit. The first option is [time], which is the number of seconds or milliseconds before the animation starts.
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);
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With