Question

您可以在此处查看我目前所拥有的内容：http://codepen.io/joe/pen/mkjxi

我的目标是使文本行以交错的方式显示，从而为网站的主页提供良好的效果。

我的问题是文本的3行底线最终还原为白色。我将文本从白色过渡到黑色的原因仅仅是因为我无法显示：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>

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

CSS3动画关键帧需要帮助

1 个答案: