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 noticeable, however at 30s it's more evident. I'm assuming it has something to do with the ending position margin, but can't quite pinpoint it. What should the value of the last frame be?

JSFiddle

HTML:

<div class="container">
    <div class="photobanner">
        <img class="first" src="http://placehold.it/350x150">
        <img src="http://placehold.it/350x150">
        <img src="http://placehold.it/350x150">
        <img src="http://placehold.it/350x150">
        <img src="http://placehold.it/350x150">
        <img src="http://placehold.it/350x150">
        <img src="http://placehold.it/350x150">
        <img src="http://placehold.it/350x150">
        <img src="http://placehold.it/350x150">
        <img src="http://placehold.it/350x150">
    </div>
</div>
<div class="container">
    <div class="photobanner">
        <img class="second" src="http://placehold.it/350x150">
        <img src="http://placehold.it/350x150">
        <img src="http://placehold.it/350x150">
        <img src="http://placehold.it/350x150">
        <img src="http://placehold.it/350x150">
        <img src="http://placehold.it/350x150">
        <img src="http://placehold.it/350x150">
        <img src="http://placehold.it/350x150">
        <img src="http://placehold.it/350x150">
        <img src="http://placehold.it/350x150">
    </div>
</div>
<div class="container">
    <div class="photobanner">
        <img class="first" src="http://placehold.it/350x150">
        <img src="http://placehold.it/350x150">
        <img src="http://placehold.it/350x150">
        <img src="http://placehold.it/350x150">
        <img src="http://placehold.it/350x150">
        <img src="http://placehold.it/350x150">
        <img src="http://placehold.it/350x150">
        <img src="http://placehold.it/350x150">
        <img src="http://placehold.it/350x150">
        <img src="http://placehold.it/350x150">
    </div>
</div>

CSS:

.container {
    width: 100%;
    overflow: hidden;
    margin: 10px auto;
    background: white;
}

.photobanner, .photobanner2 {
    height: 233px;
    width: 3550px;
}

.photobanner img, .photobanner2 img {
    padding-right: 10px;
    height: 233px;
    width: 350px;
}

.photobanner img  {
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.photobanner img:hover {
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -o-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
    cursor: pointer;

    -webkit-box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
    -moz-box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
    box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
}
/*keyframe animations*/
.first {
    -webkit-animation: bannermove 30s linear infinite;
       -moz-animation: bannermove 30s linear infinite;
        -ms-animation: bannermove 30s linear infinite;
         -o-animation: bannermove 30s linear infinite;
            animation: bannermove 30s linear infinite;
}

@keyframes "bannermove" {
 0% {margin-left: 0px;}
 100% {margin-left: -2125px;}
}

@-moz-keyframes bannermove {
 0% {margin-left: 0px;}
 100% {margin-left: -2125px;}
}

@-webkit-keyframes "bannermove" {
 0% {margin-left: 0px;}
 100% {margin-left: -2125px;}
}

@-ms-keyframes "bannermove" {
 0% {margin-left: 0px;}
 100% {margin-left: -2125px;}
}

@-o-keyframes "bannermove" {
 0% {margin-left: 0px;}
 100% {margin-left: -2125px;}
}

.second {
    -webkit-animation: bannermoves 30s linear infinite;
       -moz-animation: bannermoves 30s linear infinite;
        -ms-animation: bannermoves 30s linear infinite;
         -o-animation: bannermoves 30s linear infinite;
            animation: bannermoves 30s linear infinite;
}

@keyframes "bannermoves" {
 0% {margin-left: -2125px;}
 100% {margin-left: 0px;}
}

@-moz-keyframes bannermoves {
 0% {margin-left: -2125px;}
 100% {margin-left: 0px;}
}

@-webkit-keyframes "bannermoves" {
 0% {margin-left: -2125px;}
 100% {margin-left: 0px;}
}

@-ms-keyframes "bannermoves" {
 0% {margin-left: -2125px;}
 100% {margin-left: 0px;}
}

@-o-keyframes "bannermoves" {
 0% {margin-left: -2125px;}
 100% {margin-left: 0px;}
}

回答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.

来源：https://stackoverflow.com/questions/30032646/smooth-infinite-scrolling-banner-css-only