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

Question

希望优化这种无限滚动效果，但是我不完全确定在循环回原始图像时如何创建平滑过渡。在 10 多岁时几乎不明显，但在 30 多岁时更明显。我假设它与结束头寸 margin 有关，但不能完全确定它。最后一帧的值应该是多少？

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

2之间的真正空间img标签是 6px ，现在是 5px .

现在我们可以计算所需的 margin-left动画:6 x (350 + 5) = 2130px .就是这样。