1

css3でスライダーを作りたいのですが、ボタンが欲しくありません。5つの個別の画像をスライドさせる無限のアニメーションだけです。問題は、次のようなものが欲しいということです:

ページを読み込み、30 秒待ってから 2 番目を表示 30 秒待ってから 3 番目を表示 30 秒待ってから 4 番目を表示 30 秒待ってから 5 番目を表示 30 秒待ってから最初に表示

#overflow #banner {
    height: 350px;
    width: 500%;
    background: #fff;
    -webkit-animation:slide-animation 10s infinite;
}

@-webkit-keyframes slide-animation { 
    0% {margin-left: 0;}
    20% {margin-left:-100%;}
    40% {margin-left:-200%;}
    60% {margin-left:-300%;}
    80% {margin-left:-400%;}
    100% {margin-left:0;}
}

どうやってやるの？

4

3 に答える 3

0

cssプロパティanimation-delay（-webkit-animation-delayまたは-moz-animation-delay）を使用します。アニメーションを複製し、これらの遅延を30秒、60秒、90秒などに設定します

于 2013-01-16T23:43:58.713 に答える
0

初期遅延を作成するには、10秒の後に30秒を追加します。これにより、初期遅延が設定されます。

繰り返しの遅延を設定するには、JavaScriptのsetInterval関数を使用して、必要な時間間隔ごとにアニメーションの状態を変更できます。

このコードは、cssの出発点として使用できます。

animation-play-state: paused;
-moz-animation-play-state: paused; /* Firefox*/
-webkit-animation-play-state: running; /* Safari and Chrome */
-o-animation-play-state: running; /* Opera */

javascriptを使用すると、この関数でうまくいくはずです。

function changeAnimState() {
    x = 0;
    var banner = document.getElementById("banner");
    if (x%2 == 0) {banner.style.animationPlayState="running";}
    else {banner.style.animationPlayState="paused";};
    x+ = x;
)

window.onload = setInterval(changeAnimState(), 30000);

このコードは、プレフィックスなしのアニメーション再生状態用です。プレフィックス付きバージョンを追加するには、WebkitAnimationPlayStateまたはMozAnimationPlayStateまたはOAnimationPlayStateを追加するだけです。

于 2013-01-17T00:17:00.383 に答える
0

私はこれを自分で別の方法で行いました。ここに私の例を示します。

-webkit-animation: baloon 10s ease-in-out 3s infinite normal;

@-webkit-keyframes baloon { 
0% { -webkit-transform: translate(0px, 0px); } 
50% { -webkit-transform: translate(50px, 75px); } 
100% { -webkit-transform: translate(0px, 0px); } 
}

最初の行の 3 は、ページがロードされてから開始するまでに 3 秒遅延します。

于 2013-01-16T23:53:10.570 に答える