用 animation + transform 实现横向/纵向无缝滚动需双容器错位、overflow: hidden、max-content 宽度及 avoid left/top；scroll-timeline 不适用自动滚动，仅响应手动滚动。
用 animation + transform 实现横向/纵向无缝滚动
纯 CSS 实现自动滚动，本质是让元素在固定容器内持续位移，再通过“首尾衔接”消除跳帧。关键不是动效本身，而是如何让动画结束瞬间视觉不重置。
-
overflow: hidden必须加在容器上，否则滚动内容会溢出可见区域 - 横向滚动用
translateX()，纵向用translateY()；不要用left/top，它触发布局计算，性能差 - 动画时长（如
10s）越小，滚动越快；但过短会导致人眼感知卡顿，建议 ≥5s - 必须设置
white-space: nowrap（横向）或控制行高+高度（纵向），否则文字自动换行会打断滚动节奏 - 无缝的核心技巧：内容宽度设为
width: max-content或手动补足（如padding-left: 100%），让动画终点刚好对齐起点视觉位置
animation-timeline: scroll() 不是自动滚动，别混用
很多人看到 scroll() 就以为能“自动滚”，其实它完全相反：它把动画绑定到用户手动滚动行为上，不是驱动元素自己动。想实现自动滚动，animation-timeline 没用，硬套只会让动画不动或报错。
- 如果你写了
animation-timeline: scroll()却发现动画根本不播放，不是代码写错，而是你误用了场景 -
scroll()只响应真实滚动事件，比如鼠标滚轮、触摸拖拽、键盘 PageDown —— 它不会自己触发滚动 - 真要靠滚动触发效果（比如进视口才动），该用
animation-timeline: view()，配合animation-range: entry 0% cover 50%
双容器错位法解决循环跳帧
单个元素 @keyframes 循环到 100% 后回跳 0%，浏览器渲染层会闪一下。生产环境必须用两个相同内容的容器，错开相位，让一个移出时另一个正好补位。
- 两个子容器都设相同
animation，但第二个加animation-delay: -5s（假设总时长 10s），形成半周期偏移 - 父容器用
display: flex或inline-block并设width: max-content，避免文档流塌陷 - 不要用
visibility: hidden控制显隐，它仍占布局空间；改用transform: translateX(-200%)移出视口更可靠 - 移动端要注意
passive: true虽然不涉及 JS，但若后续叠加 touch 事件监听，记得声明 passive 避免被浏览器强制降级
兼容性兜底：不是所有浏览器都支持 scroll-timeline
目前（2026年7月）scroll-timeline 系列属性仅在 Chrome/Edge 115+ 和 Safari 17.4+ 原生支持，Firefox 仍需前缀或未实现。但自动滚动动画本身不依赖它，所以老浏览器照常运行。
- 检查是否启用新特性：用
@supports (animation-timeline: scroll())包裹滚动驱动代码，避免无效样式污染 - 自动滚动动画（
transform+animation）从 IE10 开始就稳定支持，无需额外 polyfill - 如果项目必须兼容旧版 Safari（≤16.x），避开
view()和animation-range，改用 JS 监听IntersectionObserver+ CSS 变量控制
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
