Background image infinitely moving to the left within full width container - html

Question

I want to create an infinitely scrolling (to the left) image animation, where the container is full width and the background image is repeated horizontally. So it will always be like a ticker style - the same image just infinitely moves to the left with no gaps.
Ideally I'd like it to be pure html and css if possible.
This is my attempt - https://jsfiddle.net/7Ljz82n9/
At the moment it moves to the left but there's a gap at the end and it jumps, where am I going wrong?
Html
<div class="tech-slideshow">
<div class="mover-1"></div>
</div>
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%);
}
}

Answer 1

If you are willing to use two divs inside the "slideshow" you could do something like this:
.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; }
}
<div class="tech-slideshow">
<div class="wrapper">
<div class="first"></div>
<div class="second"></div>
</div>
</div>
This will move the divs to the left until a full rotation is made and the second picture is "in the same spot" the first slide and can now be shown again. The padding on the second div is to make it align after the first div. You can alter this to use something else etc.
Here's also a fiddle to play around with: https://jsfiddle.net/thepio/7Ljz82n9/4/
EDIT:
I thought to myself why would this not be possible with using pseudo-elements. And it is! Here's an example of using the pseudo-element ::after with only one div. I think you can figure out the widths, margins and paddings etc (1 x image width or 2 x image width).
.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::after {
display: block;
content: '';
width: 1440px;
height: 102px;
padding-left: 1440px;
background: url('http://placehold.it/1440x102') top right no-repeat;
}
#keyframes movediv {
0% { margin-left: 0px; }
100% { margin-left: -1440px; }
}
<div class="tech-slideshow">
<div class="wrapper">
<div class="first"></div>
</div>
</div>
And also a fiddle about it: https://jsfiddle.net/thepio/05w6ceue/1/