in 10 seconds fade in a card html css

1Your 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:
2
3CSS only: http://jsfiddle.net/marionebl/M9LR6/
4
5Note 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
6
7@keyframes fadeInOut {
8    0% {
9        opacity: 0;
10    }
11    16% {
12       opacity: 1;
13    }
14    84% {
15       opacity: 1;
16    }
17    100% {
18       opacity: 0;
19    }
20}
21
22.message {
23    width: 400px;
24    margin: 0 auto;
25    opacity: 0;
26    text-align: center;
27   -webkit-animation: fadeInOut 6s;
28   animation: fadeInOut 6s;
29}
30Involving JS: http://jsfiddle.net/marionebl/P26c9/1/
31
32Is somewhat more flexible and easier to change, supports IE9.
33
34CSS:
35
36@-webkit-keyframes fadeIn {
37    from {
38        opacity: 0;
39    }
40    to {
41        opacity: 1;
42    }
43}
44@keyframes fadeIn {
45    from {
46        opacity: 0;
47    }
48    to {
49        opacity: 1;
50    }
51}
52
53@-webkit-keyframes fadeOut {
54    from {
55        opacity: 1;
56    }
57    to {
58        opacity: 0;
59    }
60}
61@keyframes fadeOut {
62    from {
63        opacity: 1;
64    }
65    to {
66        opacity: 0;
67    }
68}
69
70.fadeIn {
71    -webkit-animation: fadeIn;
72    animation: fadeIn;
73    opacity: 1;
74}
75
76.fadeOut {
77    -webkit-animation: fadeOut;
78    animation: fadeOut;
79    opacity: 0;
80}
81
82.fast {
83    -webkit-animation-duration: 1s;
84    animation-duration: 1s
85}
86
87.message {
88    width: 400px;
89    margin: 0 auto;
90    text-align: center;
91}
92JS:
93
94var $message = $('.message');
95$message.addClass('fadeIn fast');
96
97setTimeout(function(){
98   $message.removeClass('fadeIn').addClass('fadeOut');
99}, 5000);