背景图像动画

Question

是否有人建议如何以这种方式为超大背景图像设置动画：它应该平滑地从左向右移动，从上到下，从右到左，然后再向上移动。我希望下面的草图可以理解。

Answer 1

你会使用动画。

jsfiddle：http://jsfiddle.net/XXUyj/4/

HTML：

<div id="bg"></div>

CSS：

#bg {
    left: 0;
    position: absolute;
    top: 0;
    width:100%;
    height: 100%;
    z-index: 60;
    background-image: url('http://superhaufen.de/earth.jpg');
    animation-duration: 10s;
    animation-name: slide;
    animation-iteration-count: infinite;
    background-size: 200% auto;
}
@keyframes slide {
    0% {background-position: 0 0;}
    25% {background-position: 100% 0;}
    50% {background-position: 100% 100%;}
    75% {background-position: 0 100%;}
    100% {background-position: 0 0;}
}

确保在完成播放后添加所有供应商前缀（@ -moz-keyframes，@ -ms-keyframes，@ -webkit-keyframes等）

这是一个带有供应商前缀（http://jsfiddle.net/XXUyj/5/）的更新jsfiddle。我没有包含microsoft，因为所有支持动画的IE版本都支持它们而没有供应商前缀，而且我没有包含opera，因为我通常不会。它没有足够的市场份额来保证额外的CSS大小，并且无论如何它们都将成为webkit的下一个版本。