CSS变量需配合calc()加单位或@property声明类型才能驱动transform动画：calc(var(--x)*1px)实现位移，@property定义syntax可启用平滑插值，否则动画可能失效或卡顿。
怎么用 CSS 变量控制 hover 动画的 transform 效果
直接说结论：CSS 变量不能直接参与 transform 函数计算（比如 translate(var(--x), var(--y)) 会失效），但可以配合 calc() 或自定义属性 + @property 实现可配置的悬停位移、缩放、旋转等效果。关键在「变量如何被 transform 消化」。
常见错误是写成这样：transform: translateX(var(--offset)); —— 浏览器不认，动画根本不动，控制台也没报错，容易卡半天。
- 必须用
calc()包一层才能让变量参与数值运算，例如：transform: translateX(calc(var(--offset) * 1px)); -
@property是更干净的解法（Chrome 103+、Edge 103+、Safari 16.4+ 支持），它能让 CSS 变量带类型和范围，transform才能真正“理解”它 - 不支持
@property的旧环境，只能退回到calc()+ 单位硬编码，比如--scale存的是纯数字，后面手动补scale(calc(var(--scale) * 1))
为什么 calc() 里要乘 1px 或 1deg
CSS 变量本身没有单位，transform 的每个函数（translateX、rotate、scale）对输入值有严格类型要求：前者要长度，后者要角度或无量纲数。直接传变量会被当成无效值丢弃。
加 * 1px 不是为了“凑单位”，而是触发 CSS 计算引擎把变量值转为合法长度；同理，rotate(calc(var(--rot) * 1deg)) 才能生效。
立即学习“前端免费学习笔记（深入）”；
-
--tx: 20→translateX(calc(var(--tx) * 1px))✅ -
--rot: 45→rotate(calc(var(--rot) * 1deg))✅ -
--scale: 1.2→scale(calc(var(--scale) * 1))✅（* 1保持无量纲） - 别写
translateX(var(--tx) px)—— 语法错误，空格不是连接符
@property 怎么让 hover 动画真正可配置
有了 @property，你就能声明变量的语法类型和初始值，浏览器就知道这个变量该往 transform 的哪个槽里塞，还能做插值动画（比如从 0deg 平滑转到 90deg）。
没它的话，所有 calc() 都是“字符串拼接式”计算，动画可能跳变、卡顿，或者干脆不触发过渡。
- 必须加
inherits: false，否则变量无法在伪类中继承更新 - 类型声明要精准：
syntax: "<angle>"对应rotate，"<length>"对应translate - 示例：
@property --hover-rot { syntax: "<angle>"; inherits: false; initial-value: 0deg; }然后在:hover里设--hover-rot: 45deg，再用transform: rotate(var(--hover-rot));
hover 动画卡顿或不触发的三个隐藏原因
很多人调完变量发现动画还是不丝滑，问题常不在写法，而在渲染层。
- 没加
will-change: transform（尤其在频繁 hover 的元素上），浏览器不会提前升格图层，导致重排重绘拖慢帧率 -
transition写在非 :hover 规则里，但变量变更发生在 :hover 中 —— 如果没用@property，部分浏览器不会监听变量变化，过渡就失效 - 父容器用了
overflow: hidden且子元素transform超出边界，某些版本 Safari 会强制禁用硬件加速，动画变软
可配置的交互动画，难点从来不在“怎么写变量”，而在于“怎么让浏览器信得过这个变量”。变量只是接口，底层是否启用合成层、是否支持插值、是否触发重排，才是决定体验的关键。
