CSS Scroll Text初始滾動位置

Question

我想將我的.audio_player_scroll的初始滾動位置設置爲0%，因此它在開始滾動時位於框架中。然後在後續的通行證中，我希望它從100%開始滾動。這兩個都反映在下面的代碼中，但動畫始終開始滾動100%而不是我想要的第一次0%（我希望滾動文本在幀中而不是在外）。有誰知道如何解決這一問題？

.audio_player_scroll 
    position absolute 
    margin 0 
    text-align left 
    /* Apply animation to this element */ 
    animation scroll-left 10s linear infinite 
    animation-delay 1.5s 
    transform translateX(0%) 

@keyframes scroll-left { 
    0% { 
     transform: translateX(100%);   
    } 
    100% { 
     transform: translateX(-100%); 
    } 
} 

Answer 1

爲什麼它不應該從100％開始？你的變換：translateX（0％）;適用於動畫開始之前。將動畫延遲動畫延遲設置爲一個較大的值，以便在動畫之前查看它是translateX（0％）。

但是一旦動畫開始，它就會以translateX（100％）作爲你的代碼。

你可以改變你的動畫關鍵幀：

@keyframes scroll-left { 
0% { 
    transform: translateX(0%);   
} 
25% { 
    transform: translateX(100%);   
} 
75% { 
    transform: translateX(-100%); 
} 
100% { 
    transform: translateX(0%);   
} 
}