这就是我的尝试:
css代码:
body {
margin: 0;
padding: 0;
}
#slideshow {
position: relative;
overflow: hidden;
height: 100px;
}
#animate-area {
height: 100%;
width: 2538px;
position: absolute;
left: 0;
top: 0;
background-image: url('http://s10.postimg.org/noxw294zd/banner.png');
animation: animatedBackground 40s linear infinite;
-ms-animation: animatedBackground 40s linear infinite;
-moz-animation: animatedBackground 40s linear infinite;
-webkit-animation: animatedBackground 40s linear infinite;
}
/* Put your css in here */
@keyframes animatedBackground {
from { left: 0; }
to { left: -1269px; }
}
@-webkit-keyframes animatedBackground {
from { left: 0; }
to { left: -1269px; }
}
@-moz-keyframes animatedBackground {
from { left: 0; }
to { left: -1269px; }
}
现在我需要的是,每一次旋转完成,然后再次开始从右向左移动。每完成一次旋转,我需要一些距离。
有人可以帮忙解决这个问题吗?
提前致谢。
答案 0 :(得分:0)
除了动画延迟之外的css3中的迭代之间没有任何延迟,这在开始时使用,但是你可以使用jQuery来延迟。对于从右到左的方向改变:
animation: animatedBackground 40s linear infinite alternate;
-ms-animation: animatedBackground 40s linear infinite alternate;
-moz-animation: animatedBackground 40s linear infinite alternate;
-webkit-animation: animatedBackground 40s linear infinite alternate;
如果您想将延迟更改添加到:
animation: animatedBackground 40s 5s linear infinite alternate;
-ms-animation: animatedBackground 40s 5s linear infinite alternate;
-moz-animation: animatedBackground 40s 5s linear infinite alternate;
-webkit-animation: animatedBackground 40s 5s linear infinite alternate;
或者添加这个,如果你的意思是延迟"距离":
,这将在结束时给你一个延迟并开始 background-image: url('http://s10.postimg.org/noxw294zd/banner.png');
animation: animatedBackground 5s linear infinite alternate;
-ms-animation: animatedBackground 5s linear infinite alternate;
-moz-animation: animatedBackground 5s linear infinite alternate;
-webkit-animation: animatedBackground 5s linear infinite alternate;
}
/* Put your css in here */
@keyframes animatedBackground {
0% { left: 0; }
25% { left: 0; }
50% {left: -2000px;}
100% { left: -2000px; }
}
@-webkit-keyframes animatedBackground {
0% { left: 0; }
25% { left: 0; }
50% {left: -2000px;}
100% { left: -2000px; }
}
@-moz-keyframes animatedBackground {
0% { left: 0; }
25% { left: 0; }
50% {left: -2000px;}
100% { left: -2000px; }
}