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）。复制动画并将这些延迟设置为 30s、60s、90s 等

于 2013-01-16T23:43:58.713 回答
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); } 
}

第一行的 3s 会在页面加载后开始延迟 3 秒。

于 2013-01-16T23:53:10.570 回答
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 回答