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

关键帧动画后CSS3消失

1 个答案: