webkit css3 animation loop

Question

Hice un fondo para animar de izquierda a derecha. Todo funciona bien, pero cuando background-image llega a la derecha, la animación comienza de nuevo.

¿Cómo puedo hacer que funcione de manera continua para que parezca que está viajando de izquierda a derecha siempre (sin interrupciones)?

Aquí está el enlace violín sólo funciona en los navegadores WebKit:
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; 
} 

Answer 1

Con eso imagen, no puedes. El CSS está haciendo lo que se supone que debe (repitiendo infinitamente), pero la imagen en sí no es continua. Lo que necesita es una imagen cuyo último fotograma es idéntico al primero, de modo que cuando la animación finalice, parezca que nunca se detuvo.

Puede lograr este efecto haciendo una imagen extra larga y rotando la imagen a lo largo de su eje, pero este efecto funciona mejor en algunas imágenes que en otras. Algo como esto:

En cualquier caso, aquí está el resultado: 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; 
} 

Answer 2

creo que algo en la línea de "rotar" utilizando una imagen más grande de lo que necesita poder debe crear un efecto similar. . ver this page for an explanation and demo

no será estrictamente de izquierda/derecha por lo que dependerá de su imagen real si se ve bien

Answer 3

Nos gustó la idea de la misma trama en el begnning y al final, pero era mucho más fácil solo para duplicarlo 2 veces y usar una animación más larga. Esto funcionará durante 8 minutos.

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

Entonces en su elemento:

animation: animatedBackground 480s linear; 
-moz-animation: animatedBackground 480s linear; 
-webkit-animation: animatedBackground 480s linear; 
-ms-animation: animatedBackground 480s linear; 
-o-animation: animatedBackground 480s linear;