background-position动画必须配合background-size才能平滑滑动，否则会卡顿或不动；推荐用background-size:200% auto配合background-position:0% 50%→100% 50%，@keyframes只需from/to两帧，悬停启用用animation-play-state:paused/running，避免cover导致的不连贯。
background-position 动画必须配 background-size 才能滑动
直接写 animation: slide 5s infinite 但没设 background-size，动画会卡顿或根本不动。因为 background-position 的百分比位移依赖图像实际铺开的尺寸——默认 background-size: auto 时，浏览器按容器缩放，位移单位不可控，0% → 100% 可能只挪几像素，也可能跳一整屏。
实操建议：
- 用
background-size: 200% auto或300% auto拉宽图像，留出水平移动空间 - 配合
background-repeat: no-repeat（避免重复干扰位移感知） - 起始位置统一用
background-position: 0% 50%（垂直居中，水平从最左开始） - 动画终点设为
background-position: 100% 50%（200% 宽时，100% 表示向右滑过一半图宽）
@keyframes 里只写 from/to 就够了
很多人习惯写 0%、50%、100% 三帧，其实对线性滑动完全没必要。浏览器渲染 from → to 已足够平滑，多写中间帧反而增加解析负担，还容易因数值不匹配导致衔接撕裂。
常见错误现象：
- 动画跑到一半突然跳回起点 → 是
to值超出了background-size允许范围（比如background-size: 200% auto却写了to { background-position: 150% 50% }） - 首帧黑屏或露白边 →
background-position初始值没对齐图像有效区域，应始终与background-size保持比例一致
正确写法示例：
@keyframes panoramic {<br> from { background-position: 0% 50%; }<br> to { background-position: 100% 50%; }<br>}
animation-play-state: paused 是悬停触发的关键
全景动画通常不该一进页面就跑，而是等用户把鼠标移上去才启动。靠 animation-play-state: paused + :hover 切换是最轻量方案，比 JS 绑事件更稳，也避免首次加载时资源抢占。
注意点：
- 元素默认状态必须加
animation-play-state: paused，否则页面加载瞬间会闪一下动画 -
:hover里只写animation-play-state: running，别重复写整个animation属性，否则可能覆盖 duration 或 timing-function - 移动端没有 hover，如需兼容，得额外用 JS 监听
touchstart并加 class 触发
background-size: cover 会导致滑动不连贯
用 background-size: cover 做全景滑动，大概率出现“回弹”或“撕裂”——因为 cover 会动态缩放图像以填满容器，宽高比一变，background-position: 50% 对应的实际像素就飘了，动画结束帧无法精准对接起始帧。
真正可控的做法：
- 固定宽度倍数：如
background-size: 300% auto，确保水平方向有 3 倍冗余 - 位移终点 =
background-size水平值的一半：300% → 动画终点写150% 50% - 图片本身宽度建议 ≥ 容器宽度 × 2，否则拉伸后细节模糊，滑动时纹理失真明显
容易被忽略的是：滑动速度感来自 duration 与位移距离的比值，不是单纯调快动画。想“慢而深”，就把 duration 拉长到 20s 以上，同时把 background-size 提到 400%，位移终点设为 200% 50% —— 这样人眼才觉得是远处山峦缓缓后退。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
