css - 完成后暂停 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;
}