我有一个使用CSS动画关键帧的滚动列表项列表。它可以实现我想要的功能,但是我只控制持续时间,而不控制速度,因此,如果我添加项目,它会变得太快,而如果我删除项目,它会变得太慢。
是否可以仅使用CSS设置速度?
这是我的CSS,是指向CodePen的链接:https://codepen.io/disco_p/pen/BvWdqX?editors=1100
section {
height: 90vh;
background: #000;
}
ul {
margin: 0;
padding: 0;
list-style: none;
color: #fff;
font-size: em(18);
text-align: center;
font-weight: 500;
column-count: 4;
column-width: 200px;
column-gap: 50px;
animation: floatTextUp 3s infinite linear;
}
li {
margin-bottom: 1.1em;
}
.scroll {
height: 200px;
overflow: hidden;
position: relative;
}
@keyframes floatTextUp {
to {
transform: translateY(100%);
}
}