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

时间:2014-08-30 12:07:12

标签: css html5 css3

这就是我的尝试:

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/

1 个答案:

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