html - 如何在html5中为移动图像制作距离

Question

这是我尝试过的:

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

现在我需要的是，每完成一次旋转，然后再次开始从右向左移动。每完成一次旋转我都需要一些距离。

有人可以帮忙解决这个问题吗？

提前致谢。

http://jsfiddle.net/6d6xa65n/4/

Answer 1

在css3中迭代之间没有任何延迟，除了animation-delay，它在开始时使用，但是你可以使用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; }
}