CSS 背景位置动画从右到左

Question

我正在尝试为背景图像制作动画，以便图像从右到左显示。我使用了比背景所在的 div 容器宽度更大的图像。启动时的背景如下

background: url(../img/zeppelin.png);
background-repeat: no-repeat;
background-position: right;

但是当页面加载时，我希望背景具有动画效果，以便它位于左侧。这应该需要一个例子。 2 秒，只应完成一次。 (图像应位于之后的左侧)。

我不想使用任何鼠标事件或伪类。有没有办法只使用 CSS 来制作动画？我尝试寻找关键帧的解决方案，但没有成功。

Answer 1

您可以尝试使用本教程:CSS Background Animation

@keyframes animatedBackground {
    0% { background-position: 0 0; }
    100% { background-position: -300px 0; }
}
@-moz-keyframes animatedBackground {
    0% { background-position: 0 0; }
    100% { background-position: -300px 0; }
}
@-webkit-keyframes animatedBackground {
    0% { background-position: 0 0; }
    100% { background-position: -300px 0; }
}
@-ms-keyframes animatedBackground {
    0% { background-position: 0 0; }
    100% { background-position: -300px 0; }
}
@-o-keyframes animatedBackground {
    0% { background-position: 0 0; }
    100% { background-position: -300px 0; }
}

html { 
    width: 100%; 
    height: 100%; 
    background-image: url(background.png);
    background-position: 0px 0px;

    animation: animatedBackground 10s linear infinite;
    -moz-animation: animatedBackground 10s linear infinite;
    -webkit-animation: animatedBackground 10s linear infinite;
    -ms-animation: animatedBackground 10s linear infinite;
    -o-animation: animatedBackground 10s linear infinite;
}

此处示例:http://jsfiddle.net/verber/6rAGT/5/

希望它是你所需要的)