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>