Smooth Infinite Scrolling Banner [CSS Only]

Looking to optimize this infinite scrolling effect, however I'm not entirely sure how to create a smooth transition when looping back to the original image. At 10s it's hardly noti

Solution 1:

Check this out: https://jsfiddle.net/sergdenisov/wb28eeh2/3/.

You had unnecessary space between images (cause display: inline, read this article — https://css-tricks.com/fighting-the-space-between-inline-block-elements/). I set:

.photobanner, .photobanner2 {
    font-size: 0
}

Then I remove padding-right: 2px and set:

.photobanner img, .photobanner2 img {
    margin-right: 5px;
}

Really space between 2 img tags was 6px, now it's 5px.

Now we can calculate required margin-left for animation: 6 x (350 + 5) = 2130px. That's it.