CSS background-image 无法直接动画，因其是非可动画属性；需用 @property 声明可插值长度变量（syntax: "<length>" 且 initial-value 匹配），或在 Firefox 中以 font-size 回退。
直接对 background-image 里的数值（比如 radial-gradient(#000 12px, #fff 1px) 中的 12px）做动画，浏览器根本不会插值——它只会跳变。这不是写法错，而是 CSS 动画引擎压根不解析渐变字符串里的长度。
为什么 background-image 不能直接动画
因为 background-image 是非可动画属性（non-animatable property），它的值是字符串，不是数值。即使你写了 @keyframes { 0% { background-image: radial-gradient(#000 20px, #fff 1px); } 100% { background-image: radial-gradient(#000 2px, #fff 1px); } }，浏览器也不会在中间帧计算 10px、6px 这样的过渡值，而是直接切到终点。
- 所有渐变函数内部的
、 、 都无法被自动识别为可插值项 -
transition对background-image完全无效，连“进”都不会动 - 用
all或background简写也救不了，底层机制不支持
@property 声明可插值的自定义变量
真正能解的路只有一条：把要变的尺寸抽出来，用 @property 显式告诉浏览器“这是个长度，可以插值”。
- 必须写
syntax: "<length>"，否则变量会被当普通字符串处理，动画退化为跳变 -
initial-value要和关键帧里首帧值一致，否则首帧会先闪一下再开始动画 - 推荐终值避开
0px，设成0.7px或0.5px，Firefox 和 Safari 对0px渲染不稳定
示例：
立即学习“前端免费学习笔记（深入）”；
@property --r {
syntax: "<length>";
initial-value: 10px;
inherits: false;
}
<p>.circle {
background-image: radial-gradient(#000 var(--r), transparent 1px);
animation: shrink 1.5s ease-in-out forwards;
}</p><p>@keyframes shrink {
0% { --r: 10px; }
100% { --r: 0.7px; }
}Firefox 兼容方案：用 font-size 模拟
Firefox 目前（截至 128 版）仍不支持 @property。别硬扛，用 font-size 回退——它是天然可动画的长度单位，且兼容性拉满。
- 把
--r替换为font-size，再用em单位写进渐变：radial-gradient(#000 calc(1em * 0.8), transparent 1px) - 用
@supports not (@property: --r)包裹回退规则，避免覆盖现代浏览器逻辑 - 注意重置
font-size不影响文本——给容器加font-size: 0，再在伪元素或子元素里显式设文字大小
transition 和 @keyframes 的 easing 别混用
很多人在 .el { transition: all 0.4s ease-out; } 里写了缓动，结果加了 @keyframes 后动画还是生硬。问题出在：@keyframes 内部每一段插值默认走 ease，它会覆盖你在 transition 里写的节奏。
- 如果用
animation，就在@keyframes里每个关键帧之间加animation-timing-function，或用cubic-bezier()显式声明 - 如果只是 hover 触发状态切换，就别碰
@keyframes，老实用transition+transform/opacity - 慎用
width/height过渡：触发 layout，卡顿明显；优先选transform: scale()或max-height（配具体数值）
最常被忽略的其实是 @property 的 initial-value 和 syntax 缺一不可——漏掉任一个，变量就降级为普通 CSS 变量，动画立刻失效，但控制台不会报错。
