1

そのため、アニメーションが終了したら、ドロップダウンするテキストをアニメーション化しようとしています。

問題は、不透明度を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 */

ここで何が問題なのかわかりません...

4

2 に答える 2

1

あなたの.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

于 2012-12-20T22:34:57.467 に答える
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;
}
于 2012-12-20T22:45:46.057 に答える