完成后暂停css动画答案

【问题标题】：Pause css animation when it's finished完成后暂停css动画
【发布时间】：2012-12-21 06:45:46
【问题描述】：

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

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

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

【问题讨论】：

标签： css css-animations

【解决方案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;
}

【讨论】：

【解决方案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

【讨论】：