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

代码笔