如何为动态数量的Logo实现CSS Keyframe无限向上滑动动画？

问题背景 #

我希望为一组Logo图片实现CSS Keyframe动画，要求Logo无限向上滑动。目前已实现固定数量Logo的动画，但实际场景中Logo数量为2至20个的动态值，请问如何处理这类动态元素的动画？能否仅用CSS实现？还是需要借助JS？

现有固定数量Logo的实现代码 #

CSS代码

.animated-logo-set {
  display: flex;
  flex-direction: column;
  height: 20px;
  overflow: hidden;
}
.animated-logo-set span {
  font-size: 20px;
  line-height: 20px;
  background-color: red;
  height: 20px;
  animation: slideup 5s infinite;
}
@keyframes slideup {
  0%,
  15% {
    transform: translateY(0);
  }
  50%,
  66% {
    transform: translateY(-20px);
  }
  90%,
  100% {
    transform: translateY(-40px);
  }
}

HTML代码

<div class="animated-logo-set">
  <span>Samsung</span>
  <span>Toyota</span>
  <span>Samsung</span>
</div>

解决方案 #

一、纯CSS实现（适用于可预估数量范围的场景） #

如果Logo数量在2-20之间，可以通过CSS变量+预处理器循环来适配，核心逻辑是基于总数量计算每个阶段的位移和关键帧占比：

1. 用CSS变量定义单个Logo高度、总数量、动画时长等参数
2. 借助Sass/Less的循环生成对应数量的关键帧节点

示例代码：

:root {
  --logo-height: 20px;
  --total-logos: 3;
  --animation-duration: calc(var(--total-logos) * 2s); /* 每个Logo停留2秒 */
}

.animated-logo-set {
  display: flex;
  flex-direction: column;
  height: var(--logo-height);
  overflow: hidden;
}

.animated-logo-set span {
  font-size: var(--logo-height);
  line-height: var(--logo-height);
  background-color: red;
  height: var(--logo-height);
  animation: slideup var(--animation-duration) infinite linear;
}

@keyframes slideup {
  @for $i from 0 to var(--total-logos) {
    #{calc($i * 100% / var(--total-logos))}, #{calc(($i + 0.8) * 100% / var(--total-logos))} {
      transform: translateY(calc(-$i * var(--logo-height)));
    }
  }
  100% {
    transform: translateY(calc(-(var(--total-logos) - 1) * var(--logo-height)));
  }
}

注意：原生CSS无法动态生成关键帧，若不用预处理器，需手动针对2-20的数量逐一编写关键帧，灵活性较低。

二、JS辅助实现（完全适配动态数量） #

JS方案能实时根据Logo数量生成对应动画逻辑，步骤如下：

1. 获取Logo容器及子元素数量
2. 计算每个Logo的停留阶段占比和对应位移
3. 动态生成CSS关键帧并插入页面

示例代码：

const logoContainer = document.querySelector('.animated-logo-set');
const totalLogos = logoContainer.children.length;
const logoHeight = 20;
const durationPerLogo = 2; // 每个Logo停留2秒，可调整
const totalDuration = totalLogos * durationPerLogo;

// 构建关键帧内容
let keyframes = '';
for (let i = 0; i < totalLogos; i++) {
  const startPercent = (i / totalLogos) * 100;
  const endPercent = ((i + 0.8) / totalLogos) * 100; // 0.8为停留占比，可调整
  keyframes += `${startPercent}%, ${endPercent}% { transform: translateY(-${i * logoHeight}px); }\n`;
}
keyframes += `100% { transform: translateY(-${(totalLogos - 1) * logoHeight}px); }`;

// 动态插入样式
const style = document.createElement('style');
style.textContent = `
  .animated-logo-set {
    height: ${logoHeight}px;
  }
  .animated-logo-set span {
    animation: dynamic-slideup ${totalDuration}s infinite linear;
  }
  @keyframes dynamic-slideup {
    ${keyframes}
  }
`;
document.head.appendChild(style);

HTML结构保持动态生成即可：

<div class="animated-logo-set">
  <!-- 动态渲染的Logo元素 -->
  <span>Samsung</span>
  <span>Toyota</span>
  <span>Apple</span>
  <!-- 更多Logo... -->
</div>

方案选择建议 #

• 若Logo数量范围固定且较小，纯CSS（结合预处理器）可满足需求
• 若Logo数量完全动态（2-20任意变化），JS辅助方案更可靠，能自动适配任意数量的Logo

内容的提问来源于stack exchange，提问作者Ibrahim Azhar Armar