html - CSS3 アニメーション キーフレームに関する支援が必要

Question

ここで私がこれまでに持っているものを見ることができます: http://codepen.io/joe/pen/mkjxi

私の目標は、テキスト行をずらして表示し、サイトのホームページに良い効果を与えることです。

私の問題は、テキストの下 3 行が白に戻ってしまうことです。テキストを白から黒に変更したのは、display:none または visibility:hidden; を取得できなかったためです。キーフレームを操作するには...

どんな助けでも大歓迎です！ありがとう

Answer 1

forwards秘訣は、アニメーションの省略形プロパティの値を利用することです。これにより、塗りつぶしモードが変更され、アニメーションの実行後に最後のキーフレームが表示されたままになります。

また、個別のアニメーションを使用する必要はなく、1 つだけで実行できます。方法は次のとおりです。

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