in 10 seconds fade in a card html css
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);