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-animation声明中添加：

-webkit-animation-fill-mode: forwards;

由于它，您的动画将保持最后一个关键帧状态。（这里，不透明度为0）。

您可以在此处查看结果：http://codepen.io/joe/pen/CkbcL

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

完成时暂停css动画

2 个答案: