CSS background-position animate right to left

Question

I'm trying to animate a background-image, so that the image appears from right to left. I have used an image which has a greater width than the div-container, where the background is located. On start, the backgrond is the following

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

but when the page is loaded, I want the background to be animated, so that it is positioned left. This should take a eg. 2 seconds and only should be done one time. (the image should be positioned left afterwards).

I don't wanna use any mouse-events or pseudo-classes. Is there a way to animate it by using only CSS? I tried finding a solution with keyframes without success.

Answer 1

You could try using this tutorial: 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;
}

Example here: http://jsfiddle.net/verber/6rAGT/5/

Hope it that what you need)