html - CSS3 动画关键帧需要帮助

Question

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

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

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

任何帮助是极大的赞赏！谢谢

Answer 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>

​</h2>

/* 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/