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中的迭代之间没有任何延迟，这在开始时使用，但是你可以使用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;

或者添加这个，如果你的意思是延迟＆＃34;距离＆＃34;：

，这将在结束时给你一个延迟并开始

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

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

1 个答案: