background-position 不能直接 transition 是因 css 规范原不支持其过渡；chrome/edge 111+ 仅支持数值型位置，关键字或混合值会跳变；需用 @property 拆分为 --bg-x/--bg-y 并声明 syntax: "" 才可动画。
为什么 background-position 不能直接 transition
直接写 transition: background-position 0.3s 在大多数浏览器里是无效的——不是语法错，而是 CSS 规范里 background-position 原本就不在可过渡属性列表中。Chrome/Edge 111+ 虽然后来加了支持，但行为仍受限：只对「数值型」位置（如 10px 20px）生效，对关键字（center top）、百分比混合值或渐变背景里的 position 都会退化为跳变。
@property 声明自定义属性前必须明确类型
@property 不是“让任意变量可动画”的开关，它要求你显式声明变量的语法类型和继承性。漏掉 syntax 或设错（比如把长度写成 "<number>"</number> 而非 "<length>"</length>），浏览器就拒绝动画该变量。
- 必须写
syntax: "<length>"</length>才能用于background-position动画 -
inherits: false是常规选择；设为true会导致子元素意外继承并触发多余重绘 - 初始值
initial-value必须符合 syntax 类型，例如initial-value: 0px，不能写initial-value: 0
用 --bg-x 和 --bg-y 分离控制更稳妥
单个复合变量（如 --bg-pos: 0px 0px）无法被 @property 解析为可动画值，因为 syntax 不支持空格分隔的双值。正确做法是拆成两个独立变量：
/* 声明 */
@property --bg-x {
syntax: "<length>";
inherits: false;
initial-value: 0px;
}
@property --bg-y {
syntax: "<length>";
inherits: false;
initial-value: 0px;
}
<p>/<em> 使用 </em>/
.element {
--bg-x: 0px;
--bg-y: 0px;
background-position: var(--bg-x) var(--bg-y);
transition: --bg-x 0.4s ease-out, --bg-y 0.4s ease-out;
}</p></length></length>
这样既能避免语法解析失败，又方便单独控制 X/Y 方向的缓动曲线或延迟。
兼容性兜底必须手动降级
@property 目前仅 Chromium 111+、Safari 16.4+ 支持，Firefox 完全不支持。不要依赖 @supports (@property: --x) 自动切换——它在旧版 Safari 里会误判为支持，结果动画静默失效。
- 真实可用的检测是
@supports (background-position: 1px 1px) and (transition: --x 1s)，但依然不可靠 - 更稳妥的方式：用 JS 检测
CSS.supports('transition', '--x 1s')，再动态加类名启用 CSS 变量方案 - 降级样式要写在
@property块之前，否则部分浏览器会忽略后续规则
真正棘手的不是写法，而是当设计师要求「背景图跟随鼠标平滑滑动」时，你得同时处理好 touch 设备的 pointermove 节流、视差偏移计算、以及 fallback 到 transform 的视觉一致性——这些都得在 @property 失效时无缝接管。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
