我有一个使用 CSS 变换滚动的列表,但无论列表有多长,我都希望具有相同的速度。如何使用 jQuery 控制速度?
这是 CSS,以及笔的链接: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%);
}
}
最佳答案
您可以根据列表的长度使用jquery设置动画持续时间。
function calcDuration(length) {
/* For every ten items take 1s */
return length / 10 + 's';
}
const listLength = $('ul li').length;
$('ul').css('animation-duration', calcDuration(listLength));
关于javascript - 如何用 jQuery 控制 CSS 转换的速度?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53887809/