html - CSS 动画不显示所有内容

Question

所以我找到了不错的 CSS-only news ticker here ，我也实现了:

http://jsbin.com/xitazujuko/edit?html,css,output

我的问题是它只显示 4 行而不是 6 行，即使它在 HTML 中我输入了 6:

<li>News line 1</li>
<li>News line 2</li>
<li>News line 3</li>
<li>News line 4</li>
<li>News line 5</li>
<li>News line 6</li>

谁能告诉我这里缺少什么？

Answer 1

在这段代码中:

@keyframes ticker {
    0%   {margin-top: 0}
    25%  {margin-top: -30px}
    50%  {margin-top: -60px}
    75%  {margin-top: -90px}
    100% {margin-top: 0}
}

将其更改为 20% 点并再添加一个:

@keyframes ticker {
    0%   {margin-top: 0}
    20%  {margin-top: -30px}
    40%  {margin-top: -60px}
    60%  {margin-top: -90px}
    80%  {margin-top: -120px}
    100% {margin-top: 0}
}