css中的动态动画滚动速度

【问题标题】：Dynamic animation scrolling speed in csscss中的动态动画滚动速度
【发布时间】：2018-09-21 08:42:26
【问题描述】：

我有在水平方向滚动列表的动画。当越来越多的元素添加到列表中时，它开始滚动得更快。我需要使任何列表长度的滚动速度都相同。

我的 CSS

   .horizontal.scroll .list_rail {
    animation: scrollX 15s infinite linear
  }

我认为应该是这样的

.horizontal.scroll .list_rail {
    animation: scrollX calc(15s + $('ul#list li').length) infinite linear
  }

【问题讨论】：

据我所知，这个 CSS 也不能正常工作。你可以用javascript试试。

标签： html css performance animation scroll

【解决方案1】：

也许使用<marquee>标签。

 <marquee direction=right>
  <ul id="addList">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
  </ul>
</marquee>

<button onClick="add()">ADD li</button>

css

li{
  background: dodgerblue;
  color: #fff;
  padding: 10px;
  margin: 3px;
}

ul{
  display:flex;
  list-style:none;
  flex-direction:row-reverse; 
}

脚本

function add(){
  var ul = document.getElementById('addList');
  var li = document.createElement('li');
  li.innerHTML = 'other text';
  ul.appendChild(li)
}

codepen

【讨论】：

选框不是过时了吗？这将使它不是一个好的长期解决方案......总之我会尝试js方法thx