Imagen de fondo infinitamente moviéndose hacia la izquierda dentro del contenedor de ancho completo

Quiero crear una animación de imagen infinitamente desplazable (hacia la izquierda), donde el contenedor tiene el ancho completo y la imagen de fondo se repite horizontalmente. Por lo tanto, siempre será como un estilo de ticker: la misma imagen se mueve hacia la izquierda sin interrupciones.

Idealmente me gustaría que sea HTML y CSS puro si es posible.

Este es mi bash – https://jsfiddle.net/7Ljz82n9/

En este momento se mueve hacia la izquierda pero hay un espacio al final y salta, ¿dónde me estoy equivocando?

Html

CSS

 .tech-slideshow { height: 102px; width:100%; margin: 0 auto; position: relative; overflow: hidden; transform: translate3d(0, 0, 0); } .tech-slideshow > div { width: 1440px; background: url(http://placehold.it/1440x102); position: absolute; top: 0; left: 0; height: 100%; transform: translate3d(0, 0, 0); background-repeat:repeat-x; } .tech-slideshow .mover-1 { animation: moveSlideshow 12s linear infinite; } @keyframes moveSlideshow { 100% { transform: translateX(-66.6666%); } } 

Si está dispuesto a usar dos divs dentro de la “presentación de diapositivas”, podría hacer algo como esto:

 .tech-slideshow { height: 102px; width: 100%; max-width: 1440px; /* Can be at most the width of the image */ margin: 0 auto; position: relative; overflow: hidden; transform: translate3d(0, 0, 0); } .wrapper { height: 102px; width: 2880px; } .wrapper div { position: absolute; width: 1440px; height: 102px; background: url('http://placehold.it/1440x102') top right no-repeat; margin: 0; padding: 0; animation: movediv 12s linear infinite; } .wrapper div.second { padding-left: 1440px; animation: movediv 12s linear infinite; } @keyframes movediv { 0% { margin-left: 0px; } 100% { margin-left: -1440px; } }