CSS Marquee第二组内容添加动画后不显示求助

问题根源 #

你把动画直接应用在了work-banner容器上，而这个容器设置了overflow:hidden。当容器自身执行translateX动画时，它的可视区域会跟着移动，导致第二个work_banner_content列表虽然DOM存在，但始终处于容器的可视范围外，无法被看到。

修复方案 #

正确的做法是给内部的内容创建一个独立的滚动容器，让这个容器执行动画，外层work-banner只负责提供可视窗口和裁剪溢出内容。

修改后的完整代码 #

HTML

<div class="work-banner">
  <div class="work-banner-wrapper">
    <ul class="work_banner_content">
      <li>Work ·</li>
      <li>Work ·</li>
      <li>Work ·</li>
      <li>Work ·</li>
      <li>Work ·</li>
      <li>Work ·</li>
      <li>Work ·</li>
      <li>Work ·</li>
    </ul>
    <ul class="work_banner_content">
      <li>Work ·</li>
      <li>Work ·</li>
      <li>Work ·</li>
      <li>Work ·</li>
      <li>Work ·</li>
      <li>Work ·</li>
      <li>Work ·</li>
      <li>Work ·</li>
    </ul>
  </div>
</div>

CSS

* {
  margin: 0;
  padding: 0;
}

ul {
  list-style: none;
}

.work-banner{
  margin-top: 10px;
  border-top: solid black;
  height: 30px;
  width: 100%;
  --gap: 1rem;
  overflow: hidden;
  position: relative;
}

.work-banner-wrapper {
  display: flex;
  gap: var(--gap);
  width: calc(200% + var(--gap));
  animation: test 15s linear infinite;
}
 
.work_banner_content {
  font-weight: 600;
  flex-shrink: 0;
  display: flex;
  justify-content: space-around;
  width: 100%;
  gap: var(--gap);
}

.work_banner_content li{
  width: 12.5%;
} 

@keyframes test {
  from {
    transform: translateX(0);
    -webkit-transform: translateX(0);
  }
  to {
    transform: translateX(calc(-100% - var(--gap)));
    -webkit-transform: translateX(calc(-100% - var(--gap)));
  }
}

关键修改说明 #

1. 新增work-banner-wrapper容器包裹两个内容列表，设置宽度为calc(200% + var(--gap))，确保两个列表能完整并排
2. 将动画从work-banner转移到work-banner-wrapper上，动画移动距离为calc(-100% - var(--gap))，刚好让第二个列表滚动到第一个列表的初始位置，实现无缝循环
3. 给keyframes同时添加标准transform和带前缀的-webkit-transform，提升浏览器兼容性
4. 外层work-banner仅保留overflow:hidden和基础样式，专注于可视区域的裁剪

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