CSS背景位置从右到左动画

Question

我正在尝试为背景图像设置动画,以便图像从右到左显示.我使用的图像宽度大于背景所在的div容器的宽度.一开始,背景如下

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

但是当页面加载时,我希望将背景设置为动画,以使其位于左侧.这应该采取例如.2秒,只应该做一次.(图像应该在之后左侧定位).

我不想使用任何鼠标事件或伪类.有没有办法通过只使用CSS来动画它？我尝试使用关键帧找到解决方案但没有成功.

Answer 1

您可以尝试使用this tutorial:CSS背景动画

@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/

希望你需要的东西)