动画时长？

Question

我有一个简单的 CSS 选取框在屏幕上向上滚动，主要使用此处找到的代码 (JSFiddle)：

<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

我找到了一个解决方案，如果你 "sync" 具有你想要的段落数量的 -100% （并在 <div class="marquee-inner"> 中使用 <p> 因为它给你更多在滚动动画中控制):

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/

动画时长？

Animation duration?

css

animation

duration

marquee