关键帧动画后CSS3消失

Question

我正在使用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>

Answer 1

默认情况下,元素在动画完成后返回其原始状态.您可以通过应用保持元素在动画结束时的状态animation-fill-mode: forwards;

http://www.w3schools.com/cssref/css3_pr_animation-fill-mode.asp