Question

我想用css3做一个滑块，我不想要任何按钮。只是一个无限的动画，可以滑动5个单独的图像，问题是我想要这样的东西：

在页面加载，等待30秒然后显示第二次等待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;}
}

我该怎么做？

Answer 1

使用css属性animation-delay（-webkit-animation-delay或-moz-animation-delay）。复制动画并将这些延迟设置为30秒，60秒，90秒等

Answer 2

我这样做的另一种方式我自己就是我的榜样：

-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); } 
}

第一行中的3s将在页面加载之后将其延迟3秒。

Answer 3

要使初始延迟在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。

每步的css3动画延迟

3 个答案: