CSS 自动收报机无法正常工作答案

【问题标题】：CSS ticker not fully workingCSS 自动收报机无法正常工作
【发布时间】：2016-03-16 06:09:25
【问题描述】：

我正在尝试使用网络上的一些示例来构建 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>

【问题讨论】：

我并不擅长 CSS 动画，但我有理由确定它可能与 `100% { margin-top:0 } 有关

标签： html css css-animations ticker

【解决方案1】：

100% {margin-top: 0}

那条线正在重置margin-top，所以它会回升...如果你尝试margin-top：-120px，你可以看到第5个项目。

（但是，使用 CSS 让 ticker 滚动浏览数百个项目，对于 UI/UX 和文件大小来说听起来很糟糕......您可能需要 JavaScript 来实现这一点）。

【讨论】：

我认为你是对的。我希望保持简单，但看起来我将不得不使用 JS 自动收录器插件。

【解决方案2】：

看看这可能会有所帮助。

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

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

上面的代码可以解决问题，首先它调用动画（通过名称“ticker”，已经声明）然后10s动画时间，cubic-bezier然后键入并最后循环它infinite次。

【讨论】：