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在關鍵幀動畫後消失

回答

相關問題