文章/答案/技术大牛

发布

社区首页 >问答首页 >html5中运动图像距离的确定

问html5中运动图像距离的确定
EN

Stack Overflow用户

提问于 2014-08-30 12:07:11

回答 1查看 161关注 0票数 1

这就是我试过的：

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/

html

css

回答 1

Stack Overflow用户

回答已采纳

发布于 2014-08-30 12:33:48

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/25582193

复制

相似问题

问html5中运动图像距离的确定
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问html5中运动图像距离的确定EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问html5中运动图像距离的确定
EN