jquery - 如何更改 CSS 或 JQuery 中的滚动文本

Question

我在 <div> 中制作了一个滚动文本.滚动一次需要 15s。我喜欢一个接一个地滚动更改文本。怎么办？我的 CSS 是

/*Text scrolling*/
.scroll-right {
 height: 50px;
 font-size: 20px;
 background: #D00000;   
 overflow: hidden;
 position: relative;
 color: white;
 font-weight: bold;
 font-family: Sans-serif;
}
.scroll-right p {
 position: absolute;
 width: 100%;
 height: 100%;
 margin: 0;
 line-height: 50px;
 text-align: center;
 /* Starting position */
 -moz-transform:translateX(-100%);
 -webkit-transform:translateX(-100%);   
 transform:translateX(-100%);
 /* Apply animation to this element */  
 -moz-animation: scroll-right 15s linear infinite;
 -webkit-animation: scroll-right 15s linear infinite;
 animation: scroll-right 15s linear infinite;
}
/* Move it (define the animation) */
@-moz-keyframes scroll-right {
 0%   { -moz-transform: translateX(-100%); }
 100% { -moz-transform: translateX(100%); }
}
@-webkit-keyframes scroll-right {
 0%   { -webkit-transform: translateX(-100%); }
 100% { -webkit-transform: translateX(100%); }
}
@keyframes scroll-right {
 0%   { 
 -moz-transform: translateX(-100%); /* Browser bug fix */
 -webkit-transform: translateX(-100%); /* Browser bug fix */
 transform: translateX(-100%);      
 }
 100% { 
 -moz-transform: translateX(100%); /* Browser bug fix */
 -webkit-transform: translateX(100%); /* Browser bug fix */
 transform: translateX(100%); 
 }
}

HTML 是

<div class="scroll-right">
<p>...To rent...</p>
</div>

第一次滚动是“...To rent...”，然后消失，下次再次出现时，应该会出现“..For the last three months...”。我怎样才能做到这一点？代码见Jsfiddle .

Answer 1

我会在 HTML 中包含您想要的两个文本。

<div class="scroll-right">
<p>...To rent...</p>
<p>...For the last three months...</p>
</div>

然后将动画设置为 30 秒，但在关键帧中完成 50%，这样您就有一个 15 秒的动画重复，并有 15 秒的延迟。让第二个 child 延迟 15 秒，让他们轮流上课。

这是没有前缀的 CSS，所以你明白了。

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


.scroll-right p:nth-child(1) {
   animation: scroll-right 30s linear infinite;
}
.scroll-right p:nth-child(2) {
   animation: scroll-right 30s linear 15s infinite;
}

编辑 这是一个完整的工作 fiddle :https://jsfiddle.net/5bcttpe9/17/