html - CSS ticker 不能完全工作

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)。