动画持续时间？

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

我找到了一个解决办法，如果你“同步”的-100%与你想要的（并且采用<p>内<div class="marquee-inner">，因为它可以让你在滚动动画更多的控制）段落的量：

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

所以是你想拥有4段做这样的事情：

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

而且也.marquee-inner不使用line-height: 50px;改用margin-bottom：

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

看看这个例子：https://jsfiddle.net/u2j2679u/