完成时暂停css动画

Question

因此，我试图在完成动画后放下一些文字。

问题是它完成后就消失了，即使我将不透明度设置为1 @ 100％。

/* text animation */ 

@-webkit-keyframes textAnimation { 
    0% { 
     opacity: 0; 
     -webkit-transform: translateY(-200%); 
    } 
    10% { 
     opacity: 1; 
     -webkit-transform: translateY(0%); 
    } 
    20% { 
     opacity: 1; 
     -webkit-transform: translateY(0%); 
    } 
    100% { 
     opacity: 1; 
     -webkit-transform: translateY(0%); 
    } 

} 




.text-animation { 
    z-index: 1000; 


    width: 100%; 
    text-align: center; 
    opacity: 0; 
    -webkit-animation: textAnimation 2s linear 2s; 
    -moz-animation: textAnimation 2s linear 2s; 
    -o-animation: textAnimation 2s linear 2s; 
    -ms-animation: textAnimation 2s linear 2s; 
    animation: textAnimation 2s linear 2s; 
    -webkit-animation-iteration-count: 1; 
     -webkit-animation-delay: 1s; 
    -moz-animation-delay: 1s; 
    -o-animation-delay: 1s; 
    -ms-animation-delay: 1s; 
    animation-delay: 1s; 
} 

/* text animation */ 

我只是不明白的问题是在这里什么...

Answer 1

这为我工作。

如果您在类中设置了结束状态并且不添加延迟。

@-webkit-keyframes textAnimation { 
    0% { opacity: 0; -webkit-transform: translateY(-200%); } 
    33% { opacity: 1; -webkit-transform: translateY(-200%); } 
    100% { opacity: 1; -webkit-transform: translateY(0%); } 
} 

.text-animation { 
color:#fff; 
font-size:32px; 
width: 100%; 
text-align: center; 
opacity: 1; 
-webkit-animation: textAnimation 3s linear; 
-moz-animation: textAnimation 3s linear; 
-o-animation: textAnimation 3s linear; 
-ms-animation: textAnimation 3s linear; 
animation: textAnimation 3s linear; 
} 

Answer 2

在你的.text动画声明补充一点：

-webkit-animation-fill-mode: forwards; 

多亏了它，你的动画将保持到最后的关键帧状态。 （这里是不透明度0）。

您可以在这里看到的结果：http://codepen.io/joe/pen/CkbcL

来源：https://developer.mozilla.org/en-US/docs/CSS/animation-fill-mode