我有一个简单的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秒），动画会减慢速度，并最终通过相同（部分）的数量来获取信息。
有没有办法保持滚动速度不变，但实际上只是在重置之前增加滚动的持续时间？
答案 0 :(得分：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;
}