Html 过渡后保持div淡出

我正在使用css代码淡入然后淡出一个html div，经过一段延迟后，淡入另一个div。但是，在第二个div淡入并且代码结束后，第一个div重新出现。下面是我使用的代码。我想知道如何确保第一个div dosent在代码结束后重新出现

.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>

演示
中学
等级
你好

您可以这样做。。。这是一个

Obs：添加除webkit之外的其他css选择器，使其跨浏览器

CSS

---

你能提供一个或一个代码片段（Ctrl+M）吗？嗨，看起来上面的代码，介绍部分消失了，但我无法在介绍的空间中添加任何其他元素，因为介绍仍然在这里，但不可见。

.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;
    }
}