1

所以我试图在动画完成后对一些文本进行动画处理。

问题是它在完成后就消失了，即使我将不透明度设置为 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 */

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

4

2 回答 2

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;
}
于 2012-12-20T22:45:46.057 回答
1

在您的 .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

于 2012-12-20T22:34:57.467 回答