动画时长？

Question

我有一个简单的CSS选框在屏幕上滚动，基本上使用此处找到的代码（JSFiddle）：

https://jsfiddle.net/c8r5kc1L/1/

<style style="text/css">
.marquee-outer {
 height: 100px; 
 overflow: hidden;
 position: relative;
 color: orange;
}
.marquee-inner {
 position: absolute;
 width: 100%;
 height: 100%;
 margin: 0;
 line-height: 50px;
 text-align: center;
 /* Starting position */
 -moz-transform:translateY(100%);
 -webkit-transform:translateY(100%);    
 transform:translateY(100%);
 /* Apply animation to this element */  
 -moz-animation: scroll-up 5s linear infinite;
 -webkit-animation: scroll-up 5s linear infinite;
 animation: scroll-up 5s linear infinite;
}
/* Move it (define the animation) */
@-moz-keyframes scroll-up {
 0%   { -moz-transform: translateY(100%); }
 100% { -moz-transform: translateY(-100%); }
}
@-webkit-keyframes scroll-up {
 0%   { -webkit-transform: translateY(100%); }
 100% { -webkit-transform: translateY(-100%); }
}
@keyframes scroll-up {
 0%   { 
 -moz-transform: translateY(100%); /* Browser bug fix */
 -webkit-transform: translateY(100%); /* Browser bug fix */
 transform: translateY(100%);       
 }
 100% { 
 -moz-transform: translateY(-100%); /* Browser bug fix */
 -webkit-transform: translateY(-100%); /* Browser bug fix */
 transform: translateY(-100%); 
 }
}
</style>

<div class="marquee-outer">
<div class="marquee-inner">Text</div>
</div>

我正在尝试将几段内容输入实际滚动区域，这意味着在我完成所有内容之前动画会重置。如果我增加动画持续时间（例如，增加到100秒），动画会减慢速度，并最终通过相同（部分）的数量来获取信息。

有没有办法保持滚动速度不变，但实际上只是在重置之前增加滚动的持续时间？

Answer 1

我找到了一个解决方案，如果你＆＃34;同步＆＃34; -100%包含您想要的段落数量（并在<p>中使用<div class="marquee-inner">，因为它可以让您在滚动动画中获得更多控制权）：

100% { 
     transform: translateY(-100%); 
}

所以你想要有4个段落做这样的事情：

 100% { 
   transform: translateY(-400%); 
}

并且也不会在line-height: 50px;中使用.marquee-inner而是使用margin-bottom：

.marquee-inner p{
  margin-bottom: 30px;
}

查看示例：https://jsfiddle.net/u2j2679u/