最终没有空间的CSS3选取框/动画片动画

Question

我正在用2个项目集合构建选取框/动画效果。循环item-collection跨度与translateX并不困难（here the fiddle），但我不喜欢每个循环结束时的空白空间。

知道，这两个集可能会在宽度上不同，我怎么能实现“连续性”的效果，从而在第一循环之后，第一个集合（青色），第二（品红色）之后出现。

任何指针CSS或JS的解决方案是高度赞赏... =）

Answer 1

如果字幕是够大，你可以在中间的动画交换收藏品之一。

这是只要你可以用CSS独自一人的，我觉得

.marquee { 
 
    width: 100%; 
 
    height: 80px; 
 
    margin: 0 auto; 
 
    overflow: hidden; 
 
    white-space: nowrap; 
 
    border: 1px solid blue; 
 
} 
 
.marquee-content { 
 
    display: inline-block; 
 
    margin-top: 5px; 
 
    animation: marquee 5s linear infinite; 
 
} 
 
.item-collection-1 { 
 
    position: relative; 
 
    left: 0%; 
 
    animation: swap 5s linear infinite; 
 
} 
 
@keyframes swap { 
 
    0%, 50% { 
 
    left: 0%; 
 
    } 
 
    50.01%, 
 
    100% { 
 
    left: 100%; 
 
    } 
 
} 
 
.marquee-content:hover { 
 
    animation-play-state: paused 
 
} 
 
.item1 { 
 
    display: inline-block; 
 
    height: 70px; 
 
    width: 140px; 
 
    background: cyan; 
 
    vertical-align: top; 
 
    margin-left: 15px; 
 
} 
 
.item2 { 
 
    display: inline-block; 
 
    height: 70px; 
 
    width: 100px; 
 
    background: magenta; 
 
    vertical-align: top; 
 
    margin-left: 15px; 
 
    line-height: 14px; 
 
} 
 
/* Transition */ 
 

 
@keyframes marquee { 
 
    0% { 
 
    transform: translateX(0) 
 
    } 
 
    100% { 
 
    transform: translateX(-100%) 
 
    } 
 
}

<div class="marquee"> 
 
    <div class="marquee-content"> 
 
    <span class="item-collection-1"> 
 
     <span class="item1"></span> 
 
    <span class="item1"></span> 
 
    <span class="item1"></span> 
 
    <span class="item1"></span> 
 
    <span class="item1"></span> 
 
    <span class="item1"></span> 
 
    <span class="item1"></span> 
 
    </span> 
 
    <span class="item-collection-2"> 
 
     <span class="item2"></span> 
 
    <span class="item2"></span> 
 
    <span class="item2"></span> 
 
    <span class="item2"></span> 
 
    <span class="item2"></span> 
 
    <span class="item2"></span> 
 
    <span class="item2"></span> 
 
    <span class="item2"></span> 
 
    </span> 
 
    </div> 
 
    <div>