animation跳帧主因是关键帧首尾状态不一致且缺animation-fill-mode: forwards；iOS 15.4前Safari有infinite调度缺陷，需will-change: transform优化；无缝滚动推荐双份内容+translateX(-50%)而非单次位移。
为什么 animation: scroll 10s linear infinite 会“跳帧”
不是动画写错了，而是关键帧首尾状态不一致 + 缺少渲染保持策略。比如 @keyframes scroll 中 0% 是 transform: translateX(0)，但 100% 写成 translateX(-200px)，而内容总宽其实是 198px——这一像素差就会导致循环断层，视觉上“啪”一下闪回起点。
-
100%必须严格对应内容自然宽度的负值（推荐用-100%而非固定像素） - 必须加
animation-fill-mode: forwards，否则末帧样式不保留，下一循环起始瞬间丢失位移 - iOS 15.4 之前 Safari 对
infinite的调度有缺陷，建议加will-change: transform触发硬件加速缓解
横向无缝滚动必须复制内容吗
不一定，但「单次位移 + 无缝衔接」比「纯位移+重置」更稳。直接 translateX(-100%) 循环，在容器宽度变化或字体加载延迟时容易露白；而双份内容（如两组 li 并列）配合 translateX(-50%)，能天然兜底。
- 纯 CSS 方案中，复制内容是最易控的无缝解法，尤其适合新闻标题这类静态文本流
- 若用 JS 动态注入，注意避免在动画进行中修改 DOM，会触发重排，造成卡顿
- 响应式场景下，
width: fit-content配合white-space: nowrap比固定像素更可靠
hover 暂停动画却失效？检查这三处
常见现象是鼠标悬停后动画继续跑，或者恢复时错位。本质是选择器权重或状态继承没对上。
- 确保暂停规则写在容器
:hover下子元素上，例如.news-container:hover .news-list，而不是只写.news-list:hover -
animation-play-state: paused不会改变当前位移值，所以暂停后恢复是接着走，不是从头播 - 标签页切走再切回时，
visibilitychange事件需手动监听并暂停/恢复，否则后台页面仍消耗 CPU
垂直滚动如何避免首尾间隙
用户反馈“最后一条消失后，要等空白再出现第一条”，问题出在动画终点和起点之间没做内容冗余或位移补偿。
- 最简方案：把全部新闻项复制一份拼在后面，动画位移设为
translateY(-50%)，这样滚动一半就自然接上 - 别依赖
margin-top做间歇滚动——它会触发布局重排，性能差，且无法真正无缝 - 用
@keyframes控制transform: translateY()，起始和结束值必须一致（如都为0），靠中间关键帧完成位移
实际项目里，最难调的往往不是动效本身，而是不同设备下字体加载时机、flex 容器宽度计算偏差、以及 Safari 对 infinite 动画的末帧释放逻辑——这些细节不打日志根本看不出问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
