平滑无限滚动条[CSS]-SmoothInfiniteScrollingBanner[CSSOnly]

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?

寻找优化这个无限滚动效果，但是我不完全确定如何创建一个平滑过渡，当循环回到原始图像。在10岁的时候很难被注意到，而到了30岁的时候就更明显了。我假设它与最终的头寸裕度有关，但不能准确地指出它。最后一帧的值应该是多少?

JSFiddle

JSFiddle

HTML:

HTML:

CSS:

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 个解决方案

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

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