CSS选取框动画 - 在屏幕关闭之前再次显示内容

Question

我有一个使用css动画选取框运行（yep）的选框。

然而客户希望它在屏幕左侧完全从右侧开始再次显示在屏幕左侧？

所以要在它完成滑出之前重新开始。

这里是一个小提琴：https://jsfiddle.net/69b9uzks/

而且动画的CSS：

.sliding-marquee ul { 
    text-align: right; 
    left: 0; 
    top: 0; 
    position: absolute; 
    animation: marquee 20s linear infinite; 
    -webkit-animation: marquee 20s linear infinite; 
    white-space: nowrap; 
    font-family: "futura-pt-n4","futura-pt",sans-serif; 
} 

@keyframes marquee { 
    0% { left: -1120px } 
    100% { left: 105% } 
} 

@-webkit-keyframes marquee { 
    0% { left: -1120px } 
    100% { left: 105% } 
} 

Answer 1

要做到这一点，你需要打破你ul成3个独立项目。

请注意，您需要计算每个项目的长度和时间以使其看起来不错。

.sliding-marquee { 
 
    width: 100%; 
 
    height: 44px; 
 
    background-color: #000; 
 
    opacity: 0.6; 
 
    color: white; 
 
    line-height: 44px; 
 
    position: absolute; 
 
    left: 0; 
 
    top: 105px; 
 
    overflow: hidden; 
 
    z-index: 100; 
 
} 
 

 
.sliding-marquee span { 
 
    display: inline-block; 
 
    font-size: 20px; 
 
    text-transform: uppercase; 
 
    position: absolute; 
 
    font-weight: 500; 
 
    left: -300px; 
 
    width: 300px; 
 
} 
 

 
.sliding-marquee span:nth-child(1) { 
 
    animation: marquee 9s linear infinite; 
 
} 
 
.sliding-marquee span:nth-child(2) { 
 
    animation: marquee 9s linear infinite; 
 
    animation-delay: 3s; 
 
} 
 
.sliding-marquee span:nth-child(3) { 
 
    animation: marquee 9s linear infinite; 
 
    animation-delay: 6s; 
 
} 
 

 
@keyframes marquee { 
 
    0% { left: -300px } 
 
    100% { left: 105% } 
 
}

<div class="sliding-marquee"> 
 
    <span>Stores Opened</span> 
 
    <span>Brands Approved</span> 
 
    <span>Regions supplied</span> 
 
</div>