CSSスクロールテキスト初期スクロール位置

Question

.audio_player_scrollの最初のスクロール位置を0%に設定したいので、スクロールを開始するときにフレーム内にあるようにします。その後、私はそれを100%からスクロールし始めたいと思っています。これらの両方は下のコードに反映されていますが、アニメーションはいつも0%の代わりに100%にスクロールし始めます（スクロールするテキストは、フレームではなくフレームで開始します）。誰もがこれを修正する方法を知っていますか？

.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%);   
} 
}