CSS 自动收报机未完全正常工作

Question

我正在尝试使用在网络上找到的一些示例构建一个 CSS 自动收报机。我已经把一些似乎有用的东西放在一起，除了它只滚动前 4 个列表项。在第 4 项之后，它会滚动回到顶部并重新开始。

我不知道是什么让它重新开始，也不知道如何显示第 5 项。我想让它能够滚动浏览可能包含数百个项目的列表。

代码....

    @keyframes ticker {
     0%   {margin-top: 0}
     25%  {margin-top: -30px}
     50%  {margin-top: -60px}
     75%  {margin-top: -90px}
     100% {margin-top: 0}
    }
    
    .news {
      box-shadow: inset 0 -15px 30px rgba(0,0,0,0.4), 0 5px 10px rgba(0,0,0,0.5);
      width: 300px;
      height: 30px;
      margin: 20px auto;
      overflow: hidden;
      border-radius: 4px;
      padding: 3px;
      -webkit-user-select: none
    } 
    
    .news span {
      float: left;
      color: #fff;
      padding: 6px;
      position: relative;
      top: 1%;
      border-radius: 4px;
      box-shadow: inset 0 -15px 30px rgba(0,0,0,0.4);
      font: 16px 'Source Sans Pro', Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -webkit-user-select: none;
      cursor: pointer
    }
    
    .news ul {
      float: left;
      padding-left: 20px;
      animation: ticker 10s cubic-bezier(1, 0, .5, 0) infinite;
      -webkit-user-select: none
    }
    
    .news ul li {line-height: 30px; list-style: none }
    
    .news ul li a {
      color: #fff;
      text-decoration: none;
      font: 14px Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -webkit-user-select: none
    }
    
    .news ul:hover { animation-play-state: paused }
    .news span:hover+ul { animation-play-state: paused }
    
    /* OTHER COLORS */
    .red { background: #d23435 }
    .red span { background: #c22b2c }

    
    
    <div class="news red">
     <span>Latest News</span>
     <ul>
      <li><a href="#">Text 1 - Short Description</li>
      <li><a href="#">Text 2 - Short Description</a></li>
      <li><a href="#">Text 3 - Short Description</a></li>
      <li><a href="#">Text 4 - Short Description</a></li>
      <li><a href="#">Text 5 - Short Description</a></li>
     </ul>
    </div>

Answer 1

100% {margin-top: 0}

该行正在重置 margin-top，因此它会恢复...如果您尝试 margin-top: -120px，您可以看到第 5 项。

（但是，代码滚动浏览数百个项目，CSS，对于 UI/UX 和文件大小来说听起来很糟糕......你可能为此需要 JavaScript）。

Answer 2

看到这个可能会有帮助。

https://plnkr.co/edit/gbTSTc6CMuCitYCN6iSO?p=preview

截至动画 animation: ticker 10s cubic-bezier(1, 0, .5, 0) infinite;

上面的代码在做这个技巧，首先它调用动画（按名称 "ticker" 已经声明）然后 10s 动画时间，cubic-bezier 然后输入，最后循环 infinite 次。

CSS 自动收报机未完全正常工作

CSS ticker not fully working

html

css

ticker

css-animations