我制作了一个从左到右动画的背景。一切正常,但当背景图像到达右侧时,动画重新开始。
我怎样才能让它连续运行,让它看起来总是从左到右行进(没有间断)?
这是仅在 webkit 浏览器中有效的 fiddle 链接:
http://jsfiddle.net/Tu95Y/750/
@-webkit-keyframes slide {
from{
background:left;
}
to{
background:right;
}
}
#logo{
width:300px;
height:200px;
background:url(http://www.psdgraphics.com/wp-content/uploads/2009/02/abstract-background.jpg);
-webkit-animation: slide 5s linear infinite;
}
最佳答案
有了那张图片,你做不到。 CSS 正在做它应该做的事情(无限重复),但图像本身不是连续的。您需要的是最后一帧与第一帧相同的图像,这样当动画结束时,它看起来就好像从未停止过一样。
您可以通过制作超长图像并沿其轴旋转图像来实现此效果,但此效果在某些图像上比在其他图像上效果更好。像这样:
无论如何,结果如下:http://jsfiddle.net/Tu95Y/751/
@-webkit-keyframes slide {
from{
background-position:1725px;
}
to{
background-position:575px;
}
}
#logo{
width:575px;
height:200px;
background:url(http://f.cl.ly/items/0g3q1A203t2A2m182i1k/newbg.png);
-webkit-animation: slide 10s linear infinite;
}
关于animation - webkit css3 动画循环,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6289507/