用 display: flex 替代 inline-block 可实现更可控的滚动容器：子项水平排列、不换行、无间隙，需设 flex-wrap: nowrap 和 overflow: hidden；translateX(100%)→translateX(-100%) 更易无缝滚动，推荐加 will-change: transform 提升性能；多行需改用 column 并统一线高；hover 暂停建议用 transition 缓冲突兀感，关键场景须 JS 监听 visibilitychange 主动接管。
用 display: flex 替代 inline-block 实现更可控的滚动容器
直接把 marquee-content 设为 display: flex，比传统 inline-block 更可靠：它天然支持子项水平排列、不换行、无间隙，且不会因字体渲染或空格产生意外偏移。关键点是禁用换行和溢出裁剪：white-space: nowrap 仍需保留（作用于子元素文本），而容器本身必须设 overflow: hidden。
常见错误是只给外层加 flex，却让内部 p 或 span 自行换行——结果动画卡顿或跳帧。正确做法是让所有滚动内容成为 flex 的直接子项，或统一包裹进一个 div 再设 display: flex。
-
flex-wrap: nowrap必须显式声明，避免某些浏览器默认换行 - 子项不要设
width或flex-basis，否则可能干扰 translateX 计算 - 若内容含图标或内联元素，统一用
vertical-align: middle对齐，防止基线错位导致视觉抖动
为什么 translateX(100%) → translateX(-100%) 在 flex 下更容易无缝
flex 容器的总宽度由子项自然撑开，transform: translateX() 移动的是整个 flex 行，而非单个字符。这意味着动画起始位置设为 translateX(100%)（即内容右边缘对齐容器右边缘），终点设为 translateX(-100%)（左边缘对齐容器左边缘），就能精准覆盖“从完全进入 → 完全离开”的全过程。
对比 inline-block 方案中常写的 padding-left: 100%，flex 不依赖 padding 模拟起始偏移，减少了因字体度量误差导致的首帧错位问题。
立即学习“前端免费学习笔记（深入）”；
- 动画时长建议用
calc()动态计算：animation-duration: calc((100vw + 200px) / 60 * 1s)，其中200px是内容总宽估算值，可配合 JS 更新 - 避免用
%做 translateX 的终点值时写成-200%——这会多滚一倍距离，造成停顿感 - 加
will-change: transform到滚动内容上，能提前触发 GPU 合成层，尤其在低性能设备上明显改善帧率
多行跑马灯用 flex-direction: column 的陷阱
想滚动多条公告？别直接套用单行逻辑。把 flex-direction 改成 column 后，translateY() 取值逻辑要同步翻转：起始用 translateY(0)，终点用 translateY(-100%) ——但这里的 100% 指的是容器高度，不是内容总高度。
真正容易踩坑的是“内容高度不可控”：每条公告行高不同、有图标、有 emoji，导致 flex 子项高度不一致，translateY(-100%) 无法让下一条完整顶上来。
- 强制统一线高：
line-height: 1.5+height: 2.25em（假设 1.5 × 1.5 = 2.25） - 用
gap控制行间距，别用margin，避免 margin 折叠干扰布局高度 - 如果公告条数动态变化，优先用 JS 测量实际总高度，再设
animation-duration，纯 CSS 难以准确响应
hover 暂停与动画重置的兼容性细节
:hover 暂停动画很简单：animation-play-state: paused。但问题在于：鼠标移开后，动画不是从暂停处继续，而是从头开始闪一下——这是因为浏览器重置了动画时间轴。
根本原因是 animation 是复合属性，修改 animation-play-state 不会保存当前进度。解决办法只有两个：
- 用
animation-play-state: running+animation-delay动态反向计算偏移，复杂且易错 - 改用 JS 控制
style.animation字符串，在暂停时记录getComputedStyle的animationDuration和当前transform值，恢复时手动设置animation-delay补偿 - 最务实的做法：接受轻微跳帧，加
transition: transform 0.2s ease-out缓冲突兀感
真正难处理的是页面切换或 Tab 失焦时动画自动暂停又恢复——这时浏览器行为不一致，Chrome 会重置，Safari 可能保持。如果你的跑马灯用于金融行情或实时告警，这点必须用 JS 监听 visibilitychange 主动接管。
