当为多个并排的 .work_banner_content 元素设置横向滚动动画时，因父容器 .work-banner 启用了 overflow: hidden，导致第二组内容虽已进入视口却无法显示；正确做法是将动画直接应用到每个子列表上，而非父容器。
当为多个并排的 `.work_banner_content` 元素设置横向滚动动画时，因父容器 `.work-banner` 启用了 `overflow: hidden`，导致第二组内容虽已进入视口却无法显示；正确做法是将动画直接应用到每个子列表上，而非父容器。
在实现 CSS Marquee（跑马灯）效果时，一个常见误区是将 @keyframes 动画绑定在父容器（如 .work-banner）上，而子元素（如多个
- ）采用 flex 布局并设为 min-width: 100%。表面看逻辑合理：两组内容各自占满一行宽度，通过平移让第二组“滑入”视口。但问题在于——.work-banner 设置了 overflow: hidden，而动画若作用于父级，所有子元素的位移均被限制在父容器裁剪区域内，第二组内容即使已通过 translateX() 进入可视范围，也会因父容器的 overflow 策略被隐藏。
✅ 正确解法是将动画直接赋予每个 .work_banner_content 元素本身。这样每组列表独立执行位移动画，且其 transform 不受父容器 overflow: hidden 的裁剪影响（注意：transform 动画元素即使超出父容器边界，只要自身未被显式隐藏，仍可正常渲染）。
以下是优化后的关键 CSS 片段：
.work_banner_content {
font-weight: 600;
flex-shrink: 0;
display: flex;
justify-content: space-around;
min-width: 100%;
gap: var(--gap);
/* ✅ 动画直接作用于每个 ul */
animation: test 15s linear infinite;
}
@keyframes test {
from {
transform: translateX(0);
}
to {
transform: translateX(calc(-100% - var(--gap)));
}
}
⚠️ 注意事项：
- 移除对 -webkit-transform 的单独声明，现代浏览器均支持标准 transform，保留前缀仅增加冗余；
- 确保 .work_banner_content 的 min-width: 100% 与内部 li 的总宽度（含 gap）匹配，避免因计算误差导致位移终点偏移；
- 若需无缝循环，建议两组内容完全一致，且动画终点精确等于单组总宽度（含间隙），即 calc(-100% - var(--gap)) 是可靠选择；
- 避免在 .work-banner 上启用 animation，否则会干扰子元素的独立位移逻辑。
该方案无需修改 HTML 结构、不依赖 JavaScript，纯 CSS 实现多组并行滚动，兼顾性能与可维护性，是构建响应式跑马灯组件的推荐实践。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
