Keep div faded out after transition - html

Question

I am using a css code to fade in and then fade out an html div, and after a delay, fade in another div. However, after the second div fades in and the code ends, the first div reappears. The code I am using is posted below. I wanted to know how to make sure the first div dosent reappear after the code ends.
.text {
-webkit-animation: fadein 5s
}
#-webkit-keyframes fadein {
0% {
opacity: 0;
}
35% {
opacity: 1;
}
72% {
opacity:1;
}
100% {
opacity:0;
}
}
#-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
#-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
#keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
.bdy {
opacity:0; /* make things invisible upon start */
-webkit-animation:fadeIn ease-in 1; /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
-moz-animation:fadeIn ease-in 1;
animation:fadeIn ease-in 1;
-webkit-animation-fill-mode:forwards; /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
-moz-animation-fill-mode:forwards;
animation-fill-mode:forwards;
-webkit-animation-duration:1s;
-moz-animation-duration:1s;
animation-duration:1s;
}
.bdy {
-webkit-animation-delay: 4.5s;
-moz-animation-delay: 4.5s;
animation-delay: 4.5s;
}
HTML:
<header>
<div class="text_paragraph">
<h1>DEMO</h1>
<h3>Secondary School</h3>
<h3>Grade</h3>
</div>
<div class="bdy">
<h1>hi</h1>
</div>
</header>

Answer 1

You can do something like this ... here is a jsFiddle
Obs: Add the other css selectors besides -webkit- to make it cross-browser
CSS
.text_paragraph {
-webkit-animation: fadeInOut 2s;
opacity:0;
}
.bdy {
-webkit-animation:fadeIn 3s;
}
#-webkit-keyframes fadeInOut{
0% {
opacity: 0;
}
35% {
opacity: 1;
}
72% {
opacity:1;
}
100% {
opacity:0;
}
}
#-webkit-keyframes fadeIn{
0% {
opacity: 0;
}
75% {
opacity:0;
}
100% {
opacity:1;
}
}