平滑无限滚动横幅[仅限CSS]

Question

想要优化无限滚动效果，但是我不完全确定如何在循环回原始图像时创建平滑过渡。在10秒时，它几乎不明显，但在30秒时更明显。我假设它与结束位置边缘有关，但不能明确指出。最后一帧的价值应该是什么？

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;} 
} 

Answer 1

检查了这一点：https://jsfiddle.net/sergdenisov/wb28eeh2/3/。

您在图像之间有不必要的空间（导致display: inline，请阅读本文 - https://css-tricks.com/fighting-the-space-between-inline-block-elements/）。我设置：

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

然后我删除padding-right: 2px，并设置：标签

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

真的空间img之间2 6px，现在是5px。

现在我们可以计算出动画所需的margin-left：6 x（350 + 5）= 2130px。而已。