CSS3無限循環動畫

Question

我正在嘗試做一個CSS3動畫的小問題。

我試圖做一個道路動畫，線/標記移動。現在它現在有效，但不是我想要的。

我需要標記從其當前位置移動（而不是從右側 - 關鍵幀使它們從右側移動），它們將移動到左側。我也需要他們不斷循環&不重置，但我不確定如何做到這一點。

body { 
 
    margin: 0 auto; 
 
} 
 
#road { 
 
    height: 75px; 
 
    background: #666666; 
 
    overflow: hidden; 
 
} 
 
.line { 
 
    width: 150px; 
 
    height: 15px; 
 
    background-color: #cccbcb; 
 
    margin: 30px 75px 0 0; 
 
    display: inline-block; 
 
    -webkit-animation: road infinite linear 4s 0s; 
 
} 
 

 
@keyframes road { 
 
    0% { transform: translateX(1000%); } 
 
    100% { transform: translateX(0%); } 
 
}

<div id="road"> 
 
    <div style="width: 100%;"> 
 
    <div class="line"></div> 
 
    <div class="line"></div> 
 
    <div class="line"></div> 
 
    <div class="line"></div> 
 
    <div class="line"></div> 
 
    <div class="line"></div> 
 
    <div class="line"></div> 
 
    <div class="line"></div> 
 
    </div> 
 
</div>

演示鏈接：https://jsfiddle.net/ke4zzjg3/

任何想法？

Answer 1

你能刪除div包裝（width: 100%;）嗎？您可以將#road設置爲100％寬度

您可以在展示中設置#road：flex，其中包含方向爲flex-flow的調整&用於中心的包裝和對齊項目。

線條元素的寬度爲150px，因此您可以將您的translateX設置爲100％至-150％（如150px） - >在您的關鍵幀的末尾，第一行將被隱藏。您還必須在類屬性中設置transform屬性。

當動畫結束時，第二行與沒有動畫的第一行位於同一位置，因此您無法看到更改。 :)

在您的動畫屬性中調整道路的速度。 如果要反轉線條的方向，只需反轉平移屬性即可。

body { 
 
    margin: 0 auto; 
 
    overflow: hidden; 
 
} 
 
#road { 
 
    width: 1000%; 
 
    display: flex; 
 
    flex-flow: row nowrap; 
 
    align-items: center; 
 
    
 
    height: 75px; 
 
    background: #666666; 
 
    overflow: hidden; 
 
} 
 
.line { 
 
    width: 150px; 
 
    height: 15px; 
 
    background-color: #cccbcb; 
 
    margin: 0 37.5px; 
 
    animation: road infinite linear 2s 0s; 
 
    
 
    transform: translateX(0%); 
 
} 
 

 
@keyframes road { 
 
    0% { transform: translateX(0%); } 
 
    100% { transform: translateX(-150%); } 
 
}

<div id="road"> 
 
    <div class="line"></div> 
 
    <div class="line"></div> 
 
    <div class="line"></div> 
 
    <div class="line"></div> 
 
    <div class="line"></div> 
 
    <div class="line"></div> 
 
    <div class="line"></div> 
 
    <div class="line"></div> 
 
</div>