弹幕动画需用 transform + @keyframes 实现高性能平滑滚动，起点 translateX(100vw)、终点 translateX(-100%)，配合随机 animation-delay、animation-iteration-count: 1 和 animation-fill-mode: forwards 确保错峰入场与状态保持。
弹幕动画的核心是用 @keyframes 定义从右到左的位移，配合 transform: translateX() 实现高性能平滑滚动，而不是靠 left 或 margin-left 触发重排。
用 transform + @keyframes 实现平滑位移
浏览器对 transform 的硬件加速支持更好，动画更流畅；用 left 会强制重排，卡顿明显。关键不是“动起来”，而是“动得稳”。
- 动画起点设为
transform: translateX(100vw)（元素完全在视口右侧外） - 终点设为
transform: translateX(-100%)（元素宽度级左移，确保完全离开左边界） - 避免写成
translateX(-100vw)—— 如果弹幕文字很长，100vw不够让它彻底滚出，会残留部分在屏幕左侧 - 动画时长建议用变量控制，比如
--duration: 15s，方便后续 JS 动态调整速度
@keyframes barrage-fly {
from { transform: translateX(100vw); }
to { transform: translateX(-100%); }
}
每个弹幕元素必须独立动画且不互相干扰
如果所有弹幕共用同一个 animation-name 和相同 animation-duration，它们会同步入场、同步消失，看起来像一整条带子，不是真实弹幕效果。
- 给每个弹幕元素加随机
animation-delay（比如0s到-10s），让它们错峰进入 - 必须设置
animation-iteration-count: 1，否则会循环导致文字重复闪现 - 用
animation-fill-mode: forwards确保动画结束后保持在translateX(-100%)状态，避免回跳 - 不要给父容器设
overflow: hidden后就不管了——子元素若未正确脱离文档流，可能撑高容器；推荐父容器加position: relative，弹幕加position: absolute
动态插入弹幕时的 CSS 注意点
JS 创建新弹幕元素后，仅加 class 不足以触发动画：浏览器可能合并样式计算，导致动画不播放。
立即学习“前端免费学习笔记（深入）”；
- 插入 DOM 后，需强制触发重绘，常见做法是读取一次元素的
offsetHeight或getComputedStyle(el).opacity - 更稳妥的是用
el.offsetHeight; el.style.animation = 'none'; setTimeout(() => { el.style.animation = ... }, 10)重置动画 - 避免用
animation-play-state: paused/running控制启停——它不重置动画状态，暂停后再播放会从中间帧继续 - 若需控制弹幕密度，别靠删 DOM 来“回收”，而应监听
animationend事件后remove()，否则内存泄漏风险高
真正难的不是让字跑起来，而是让成百上千条弹幕各自按不同时间、不同速度、不同起始位置跑，还不掉帧。关键参数（translateX 终点、animation-delay 范围、font-size 与 line-height 配合）必须根据实际文字长度和容器高度反复调，不能只套模板。
