CSS3在关键帧动画后消失

我使用css3为某些文字设置动画。我只是试图淡入它，然后几秒钟后再次消失（在其他动画之后）。我遇到的问题是我的文本淡入，但立即消失，即使我有关键帧完成@ opacity：1;为什么我的文字消失？代码如下：CSS3在关键帧动画后消失

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

来源

2016-03-14 Damien

默认情况下，动画完成后元素会返回到原始状态。您可以通过应用animation-fill-mode: forwards;

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

来源

2016-03-15 00:04:06

甜保持其元素是在动画结束时的状态！有没有一种方法可以在完成这个动画之后“说出”，做其他动画等等等等？ – Damien

您可以使用JavaScript侦听animationend事件，并在前一个结束时触发下一个动画 –

您也可以使用Web动画来完成。它使分组动画非常简单，但在大多数浏览器中都不支持，因此您需要使用polyfill https://developers.google.com/web/updates/2015/04/simplified-concepts-in-web-animations -naming？HL = EN –

CSS3在关键帧动画后消失

回答

相关问题