2

問題が発生しています。1つのCSS3アニメーションが完了したら、次のアニメーションを開始します(理想的にはフェードインします)。

これが最初のアニメーションコードです:

#truck {
position: absolute;
margin-top:90px;

-moz-animation: slide 4s;
-webkit-animation: slide 4s;
-ms-animation: slide 4s;
animation: slide 4s;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
}

@keyframes slide {
0% { left: 0px; }
35% { left: 250px; }
65% { left: 250px; }
100% { left:590px; }
}

@-webkit-keyframes slide {
0% { left: 0px; }
35% { left: 250px; }
65% { left: 250px; }
100% { left:590px; }
}

@-ms-keyframes slide {
0% { left: 0px; }
35% { left: 250px; }
65% { left: 250px; }
100% { left:590px; }
}

誰かが2番目のアニメーションと最初のアニメーションが完成したらそれを呼び出す方法を手伝ってくれるなら、私はそれを大いに感謝します。

4

1 に答える 1

3

私はあなたが遅延を使うことができると思います:

animation-delay:4s;
-moz-animation-delay:4s; /* Firefox */
-webkit-animation-delay:4s; /* Safari and Chrome */
-o-animation-delay:4s; /* Opera */

(それに合うように数を調整してください)

于 2012-12-06T22:07:20.383 に答える