CSS3在关键帧动画后消失[重复]答案

【问题标题】：CSS3 disappears after keyframe animation [duplicate]CSS3在关键帧动画后消失[重复]
【发布时间】：2016-03-15 14:18:26
【问题描述】：

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

【问题讨论】：

标签： css animation css-animations

【解决方案1】：

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

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

【讨论】：

甜蜜！有没有办法在这个动画完成后“说”，做这个其他动画等等？
您可以使用JavaScript监听animationend事件，并在上一个动画结束时触发下一个动画
您也可以使用 Web Animations 来完成。它使分组动画非常容易，但大多数浏览器尚不支持它，因此您需要使用 polyfill developers.google.com/web/updates/2015/04/…
很好的解决方案！