用 css transform + will-change 配合 requestanimationframe 控制节奏可实现移动端丝滑抽奖跑马灯动画，避免 filter 高开销属性，改用多节点 translatex + opacity 模拟拖尾，30fps 卡点控制，will-change 动态启停防内存泄漏，纯 css 双列表位移实现零 js 动画。
用 CSS transform + will-change 配合 requestAnimationFrame 控制节奏，完全避开 filter（如 blur、drop-shadow）这类高开销属性，就能在移动端 H5 实现丝滑抽奖跑马灯动画。
用 transform 替代位移类滤镜动画
跑马灯本质是元素循环位移，别用 filter: blur() 或 filter: drop-shadow() 做“光晕”“拖影”效果——这些在低端安卓机上极易掉帧。改用多个相同奖品项 DOM 节点，通过 transform: translateX() 错开偏移并叠加 opacity 渐变，模拟视觉拖尾。例如 5 个 item 同时运动，每帧只更新 style.transform 和 style.opacity，浏览器可走 GPU 加速路径。
控制帧率与节奏，避免 requestIdleCallback 误用
抽奖动画不需要 60fps 满帧：用 requestAnimationFrame + 时间戳差值控制逻辑帧（如固定 30fps），再配合 CSS transition-timing-function: steps(1) 或 JS 分段位移，让滚动看起来更“卡点”、有仪式感。切忌在 rAF 里触发 layout（如读 offsetTop）、或频繁增删 DOM——用 display: none 切换显隐，比 remove/append 更轻量。
降级兼容与内存优化
对 iOS Safari 14.5 以下或 Android UC 内核等老环境，检测 CSS.supports('motion-path', 'path()') 或监听 raf 执行耗时（>12ms 连续 3 帧则自动降为 20fps）。所有奖品 DOM 提前渲染好、用 will-change: transform 提前告知浏览器要动，但动画结束立即 will-change: auto 释放资源，防止内存泄漏。
用纯 CSS 实现“伪多层跑马灯”（零 JS 动画逻辑）
写两组相同奖品列表（list-a / list-b），高度一致，绝对定位重叠。给 list-a 设 animation: scroll 8s linear infinite，list-b 延迟 -4s 启动同名 animation。CSS @keyframes 中只用 transform: translateY()，不触发布局。这样靠浏览器原生动画引擎驱动，JS 零介入，最省性能。
