html - css中的动态动画滚动速度

Question

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

我的CSS

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

我想应该是这样的

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

Answer 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