本文详解如何通过 CSS @property 声明自定义动画属性，结合 radial-gradient 与关键帧，解决径向渐变半径突变导致动画卡顿的问题，并提供 Firefox 兼容方案。
本文详解如何通过 css `@property` 声明自定义动画属性，结合 `radial-gradient` 与关键帧，解决径向渐变半径突变导致动画卡顿的问题，并提供 firefox 兼容方案。
在 CSS 中直接对 background-image 中的 <length> 值（如 radial-gradient(#363636 10px, transparent 1px) 中的 10px）做关键帧动画是无效的——浏览器无法解析该值为可动画属性，因此动画会跳变（jump），而非平滑过渡。根本原因在于：CSS 动画仅支持对已知可动画属性（如 opacity、transform、font-size 等）进行插值计算，而 background-image 是非动画属性，其内部长度值不参与 CSS 动画引擎的插值流程。
✅ 正确解法是引入 CSS 自定义属性（CSS Custom Properties） + @property 规则，将渐变中的关键尺寸声明为受控的可动画变量：
@property --d {
syntax: "<length>";
initial-value: 10px;
inherits: false;
}
.loader {
width: 200px;
height: 200px;
background-color: transparent;
/* 使用变量 --d 替代硬编码尺寸 */
background-image: radial-gradient(#363636 var(--d), transparent 1px);
background-size: 30px 30px;
animation: loaderout 2s ease-in-out forwards;
}
@keyframes loaderout {
0% { --d: 10px; }
100% { --d: 0.7px; } /* 可精确控制终值，避免 0px 引发渲染异常 */
}? 关键点说明：
- @property --d 显式声明 --d 为 <length> 类型，使浏览器能对其执行数值插值；
- initial-value 和 syntax 缺一不可，否则变量将被忽略，动画退化为跳变；
- 推荐使用 ease-in-out 缓动函数提升视觉自然度；
- 终值建议设为 0.7px 而非 0px，因 0px 在部分浏览器中可能导致径向渐变渲染异常或消失。
兼容性处理：Firefox 回退方案
目前 Firefox 尚未支持 @property（截至 Firefox 128）。为保障一致性，可利用 @supports 检测并启用基于 font-size 的模拟方案（利用 font-size 是天然可动画长度属性）：
立即学习“前端免费学习笔记（深入）”；
@supports not (--d: 0px) {
.loader {
/* 将 --d 的语义映射到 font-size */
font-size: 10px;
}
@keyframes loaderout {
0% { font-size: 10px; }
100% { font-size: 0.7px; }
}
/* 在 background-image 中通过 calc() 读取 font-size 值 */
.loader {
background-image: radial-gradient(#363636 calc(1em * 1), transparent 1px);
}
/* 注意：此方式需同步调整 em 计算逻辑，更稳妥的做法是改用 transform 缩放伪元素 */
}⚠️ 更推荐的兼容实践（兼顾简洁与健壮）：
对不支持 @property 的浏览器，采用 伪元素 + transform: scale() 实现视觉等效效果（无需依赖背景渐变尺寸变化）：
.loader::before {
content: '';
position: absolute;
inset: 0;
background-image: radial-gradient(#363636 10px, transparent 1px);
background-size: 30px 30px;
animation: scaleDown 2s ease-in-out forwards;
}
@keyframes scaleDown {
to { transform: scale(0.07); } /* 10px → 0.7px ≈ 缩放 0.07 倍 */
}总结
- ✅ 优先使用 @property + CSS 变量驱动 radial-gradient 内部长度，实现真正平滑、声明式的动画；
- ✅ 务必为 @property 指定 syntax 和 initial-value，否则无效；
- ⚠️ 避免在 radial-gradient 中直接动画 background-image；
- ? 对 Firefox 等不支持浏览器，推荐 transform 缩放伪元素作为高性能、高兼容回退方案；
- ? 开发时建议在 Chrome/Edge（支持 @property）与 Firefox 中交叉验证，确保视觉一致性。
