CSS3 动画关键帧需要帮助答案

【问题标题】：Assistance needed with CSS3 Animation KeyframesCSS3 动画关键帧需要帮助
【发布时间】：2012-12-03 10:16:50
【问题描述】：

你可以在这里看到我到目前为止所拥有的：http://codepen.io/joe/pen/mkjxi

我的目标是让文本行以交错的方式出现，给网站的主页一个很好的效果。

我的问题是底部的 3 行文本最终恢复为白色。我将文本从白色转换为黑色的原因只是因为我无法获得 display:none 或 visibility:hidden;使用关键帧...

非常感谢任何帮助！谢谢

【问题讨论】：

标签： html css css-animations

【解决方案1】：

诀窍是利用动画速记属性中的forwards 值。这会更改填充模式并在动画运行后保持最后一个关键帧可见。

另外，没有必要使用单独的动画，你可以只用一个。方法如下：

<!-- HTML -->

<div class="text1">Expert Electricians.</div>
<div class="text2">Serving all of Los Angeles,</div>
<div class="text3">Ventura and Orange Counties</div>
<div class="text4">For over 20 years</div>

/* CSS */

div {
    color: #fff;
    text-transform:uppercase;
}
.text1 {
    -webkit-animation:text 2s .5s forwards;
       -moz-animation:text 2s .5s forwards;
         -o-animation:text 2s .5s forwards;
            animation:text 2s .5s forwards;
}
.text2 {

    -webkit-animation:text 2s 1s forwards;
       -moz-animation:text 2s 1s forwards;
         -o-animation:text 2s 1s forwards;
            animation:text 2s 1s forwards;
}
.text3 {

    -webkit-animation:text 2s 1.5s forwards;
       -moz-animation:text 2s 1.5s forwards;
         -o-animation:text 2s 1.5s forwards;
            animation:text 2s 1.5s forwards;
}
.text4 {

    -webkit-animation:text 2s 2s forwards;
       -moz-animation:text 2s 2s forwards;
         -o-animation:text 2s 2s forwards;
            animation:text 2s 2s forwards;
}

@-webkit-keyframes text {
    100%  {color:#000;}
}
@-moz-keyframes text {
    100%  {color:#000;}
}
@-o-keyframes text {
    100%  {color:#000;}
}
@keyframes text {
    100%  {color:#000;}
}

这是一个活生生的例子：http://jsfiddle.net/joshnh/2Sp48/

【讨论】：

jsfiddle.net/slickdev/k8geb - 我已经更新它以使用可见性而不是字体颜色。在不支持 css 动画的浏览器上会发生什么？我假设文本将停留在“可见性：隐藏”上？如果观众浏览器不支持动画，有没有办法让文本可见？
有。使用关键字“both”而不是“forwards”，并保持可见性：隐藏；在动画关键帧内。这告诉浏览器根据第一个关键帧渲染元素，并在动画运行后保持最后一个关键帧可见。这是一个例子：jsfiddle.net/joshnh/MTFeu