我正在使用CSS3来动画一些文本。我想让它淡入，然后消失，几秒钟后再次出现（在其他动画之后）。我的问题是我的文本淡入后立即消失，尽管我在关键帧中设置了 opacity:1; 。为什么我的文本会消失呢？以下是代码：
<style>
#myArea {
height:250px;
width:300px;
position:relative;
overflow:hidden;
}
.text {
position:absolute;
z-index:1;
bottom:20px;
left:10px;
opacity:1;
}
#txt1 {
animation: txt1-fade 1s 1 ease-in;
animation-delay:1s;
}
#txt2 {
-webkit-animation: txt2-fade 5s infinite; /* Chrome, Safari, Opera */
animation: txt2-fade 5s infinite;
}
#txt3 {
-webkit-animation: txt3-fade 5s infinite; /* Chrome, Safari, Opera */
animation: txt3-fade 5s infinite;
}
@keyframes txt1-fade {
0% {opacity: 0; left:10px;}
100% {opacity: 1; left:10px;}
}
</style>
<body>
<div id="myArea">
<img src="images/backgrnd.jpg" />
<div id="txt1" class="text">
<img src="images/text1.png" />
</div>
<div id="txt2" class="text">
<img src="images/text2.png" />
</div>
<div id="txt3" class="text">
<img src="images/text3.png" />
</div>
</div>