如何使用jQuery控制CSS转换的速度

Question

我有一个使用 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%);
    }
  }

Answer 1

您可以使用 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));

Answer 2

嗨，

伊丽莎白，欢迎:)

您在 100 秒内旅行 3%（这是相对的）。因此，您需要有一个固定（绝对）高度，因此要保持恒定的速度。是否有最大列表大小？如果是，您可以将其用作默认高度并调整动画时间，直到您喜欢速度。

您必须使用某种类型的绝对高度，因此速度根据要行进的像素确定： 为您的.ul min-height: 200px;

这将起作用，直到所有空间都用完为止。

代码笔