如何用JS实现随机化多线条跨屏动画（替代预定义关键帧）

我正在创建若干条可跨屏移动的动画线条，移动过程中线条会改变尺寸，目前有5条且可能增加更多。我希望所有线条以随机的不同间隔移动、改变尺寸，实现永不重复的动画效果。

目前我只能为每条线条编写大量重复代码，且只能通过设置固定left和width值模拟随机，本质仍是循环重复的预定义序列。想必可以用JS以更少代码实现真正的随机化效果？

当前使用的代码 #

CSS关键帧 #

@keyframes slider {
    0%  {width: 75%; left: 10%;}
    5%  {width: 66%; left: 18%;}
    10% {width: 60%; left: 26%;}
    15% {width: 31%; left: 34%;}
    20% {width: 26%; left: 38%;}
    25% {width: 20%; left: 44%;}
    30% {width: 10%; left: 52%;}
    35% {width: 8%; left: 71%;}
    40% {width: 7%; left: 82%;}
    45% {width: 5%; left: 89%;}
    50% {width: 0%; left: 94%;}
    55% {width: 12%; left: 79%;}
    60% {width: 21%; left: 72%;}
    65% {width: 35%; left: 59%;}
    70% {width: 38%; left: 51%;}
    75% {width: 47%; left: 41%;}
    80% {width: 53%; left: 33%;}
    85% {width: 70%; left: 19%;}
    90% {width: 84%; left: 11%;}
    95% {width: 89%; left: 6%;}
    100%{width: 100%; left: 0%;}
}

元素关联样式 #

.animation :nth-child(1) {
    top: 10%;
    animation: slider 3s infinite;
}

线条基础样式 #

.an {
    height: 10px;
    position: absolute;
    background-color: #09a07a;
    top: 0;
}

完全不需要预定义固定关键帧，用JS动态控制每条线条的独立随机动画，核心步骤如下：

1. 批量处理线条元素 #

• 若已有线条：用document.querySelectorAll('.animation .an')获取所有线条节点。
• 若需动态创建：循环生成指定数量的.an元素，设置好top值（比如按10%间隔排列），添加到.animation容器中。

2. 为每条线条绑定递归随机动画 #

给每条线条写一个递归函数，每次动画结束后生成新的随机参数，实现无限不重复的动态效果：

• 核心随机参数：
  • 动画时长：自定义区间（比如2-5秒）
  • 目标left值：0%到95%之间（预留宽度空间，避免线条溢出屏幕）
  • 目标width值：保证left + width ≤ 100%，防止线条超出可视区域
• 用CSS过渡实现平滑动画：
  通过修改元素的left和width属性，配合transition控制动画时长，在transitionend事件触发后启动下一次随机动画。

示例核心逻辑：

function startLineAnimation(line) {
    // 生成随机动画参数
    const animDuration = Math.random() * 3 + 2; // 2-5秒区间
    const maxLeft = 100 - Math.random() * 30; // 避免width过小时left过大
    const targetLeft = `${Math.random() * maxLeft}%`;
    const targetWidth = `${Math.random() * (100 - parseFloat(targetLeft))}%`;

    // 随机切换过渡曲线，增加多样性
    const easing = ['ease', 'ease-in-out', 'linear'][Math.floor(Math.random() * 3)];
    line.style.transition = `all ${animDuration}s ${easing}`;
    // 应用目标样式
    line.style.left = targetLeft;
    line.style.width = targetWidth;

    // 过渡结束后触发下一次动画
    line.addEventListener('transitionend', function triggerNext() {
        line.removeEventListener('transitionend', triggerNext);
        startLineAnimation(line);
    }, { once: true });
}

// 初始化所有线条的动画
const lines = document.querySelectorAll('.animation .an');
lines.forEach((line, index) => {
    // 初始位置随机化，top按间隔排列
    line.style.top = `${index * 10 + 10}%`;
    line.style.left = `${Math.random() * 80}%`;
    line.style.width = `${Math.random() * 20 + 20}%`;
    startLineAnimation(line);
});

3. 优化细节 #

• 避免线条过度重叠：可以在生成随机参数时加入简单的位置检测，或者固定top值的间隔。
• 动态扩容：后续新增线条时，只需调用startLineAnimation(newLine)即可，无需额外编写CSS。
• 性能优化：使用{ once: true }确保过渡事件只触发一次，避免内存泄漏。

内容的提问来源于stack exchange，提问作者Joe Walker