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

CSS滚动文本初始滚动位置

1 个答案: