javascript - 强制带 % 宽度的 strip 像没有空格的选取框一样移动

Question

我有 5 个 strip ，占全宽的 20%，每个 strip 都有不同的背景颜色，我想用这种方式制作动画:1)所有 strip 从左向右移动，2) 在 ^ 动画之后，我想像在“选取框”的情况下一样继续移动，但我想避免重复后出现空白和故障(类似于无限水平滚动)。

我试过使用 http://aamirafridi.com/jquery/jquery-marquee-plugin#examples插件，但由于宽度和不同的背景颜色，在这种情况下效果不佳。

也许有一种使用纯 CSS3 的方法？这是我的草图:http://jsfiddle.net/sbgrhtqv/

<div class="strips">
    <div class="strip"></div>
    <div class="strip"></div>
    <div class="strip"></div>
    <div class="strip"></div>
    <div class="strip"></div>
</div>

.strips {
    width:100%;
    -webkit-animation-name: slide;
    -webkit-animation-duration: 4s;
    -webkit-animation-iteration-count: infinite;
}

.strip {
    height: 5px;
    width:20%;
    float: left;
}
.strip:nth-child(1) {background: red;}
.strip:nth-child(2) {background: purple;}
.strip:nth-child(3) {background: grey;}
.strip:nth-child(4) {background: green;}
.strip:nth-child(5) {background: blue;}

@-webkit-keyframes slide {
    0%{
        -webkit-transform:translateX(-100%);
    }
    100%{
        -webkit-transform:translateX(0);
    }
}

你有什么解决办法吗？我会很感激:)

Answer 1

要使动画无限，您需要复制 strip ，因为它们不能同时向右消失并填充左侧的空白区域。我还添加了一个容器来 overflow hidden 而不是无限水平滚动:

#container {
    position: relative;
    overflow: hidden;
    width: 100%; height: 5px;
}

.strips {
    position: absolute; left: -100%; top: 0;
    width: 200%; height: 100%;
    -webkit-animation: slide 4s linear infinite;
    -moz-animation:    slide 4s linear infinite;
    animation:         slide 4s linear infinite;
}

.strip { height: 5px; width: 10%; float: left; }

.strip:nth-child(1), .strip:nth-child(6) { background: red;    }
.strip:nth-child(2), .strip:nth-child(7) { background: purple; }
.strip:nth-child(3), .strip:nth-child(8) { background: grey;   }
.strip:nth-child(4), .strip:nth-child(9) { background: green;  }
.strip:nth-child(5), .strip:nth-child(10){ background: blue;   }

@-webkit-keyframes slide {
    0%   { -webkit-transform: translateX(0);   }
    100% { -webkit-transform: translateX(50%); }
}
@-moz-keyframes slide {
    0%   { -moz-transform: translateX(0);   }
    100% { -moz-transform: translateX(50%); }
}
@keyframes slide {
    0%   { transform: translateX(0);   }
    100% { transform: translateX(50%); }
}

<div id="container">
    <div class="strips">
        <div class="strip"></div>
        <div class="strip"></div>
        <div class="strip"></div>
        <div class="strip"></div>
        <div class="strip"></div>
        <div class="strip"></div>
        <div class="strip"></div>
        <div class="strip"></div>
        <div class="strip"></div>
        <div class="strip"></div>
        <div class="strip"></div>
    </div>
</div>