如何使用 CSS 自定义属性平滑动画径向渐变

2次阅读

本文详解如何通过 CSS @property 声明自定义动画属性，结合 radial-gradient 实现圆心半径的连续、流畅缩放动画，并提供 Firefox 兼容方案。

本文详解如何通过 css `@property` 声明自定义动画属性，结合 `radial-gradient` 实现圆心半径的连续、流畅缩放动画，并提供 firefox 兼容方案。

在 CSS 中直接对 background-image 中的数值（如 radial-gradient(#363636 10px, transparent 1px) 中的 10px）做关键帧动画是 无效的 ——浏览器无法自动插值两个不同的渐变函数字符串，导致动画“跳变”而非平滑过渡。要实现从大圆到小圆的细腻缩放效果，核心思路是： 将可变尺寸抽离为受控的 CSS 自定义属性，并确保该属性支持插值动画。

CSS @property 规则（属 Houdini API 的一部分）允许开发者显式声明自定义属性的类型、初始值和继承性，从而启用其在 @keyframes 中的 平滑插值能力。以下是完整、可运行的解决方案：

/* 声明可动画的长度型自定义属性 */ @property --d {syntax: "<length>";   initial-value: 10px;   inherits: false;}  .loader {position: absolute;   z-index: 1;   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;} /* 注意：此处可设为任意合法长度值，如 0.7px、1px、0px */ }

<div class="loader"></div>

? 关键点说明：

syntax: “<length>” 显式声明 –d 为长度类型，使浏览器能正确解析并插值 10px → 0.7px；

initial-value: 10px 避免未设置时的计算异常；

inherits: false 提升性能（本例中无需继承）；

动画使用 ease-in-out 而非默认线性，视觉更自然。

目前 Firefox 尚未支持 @property（截至 Firefox 128）。为保障跨浏览器一致性，可利用 @supports 进行特性检测，并采用 font-size 作为代理变量（因其天然支持插值且不影响布局）：

立即学习 “ 前端免费学习笔记（深入）”；

@supports not (--d: 0px) {.loader {     /* 利用 font-size 间接控制 --d */     font-size: 10px;}   .loader::before {content: "";     position: absolute;     inset: 0;     background-image: radial-gradient(#363636 calc(var(--d, 1em) * 1px), transparent 1px);     background-size: 30px 30px;   }    @keyframes loaderout {0%   { font-size: 10px;}     100% {font-size: 0.7px;}   }    /* 通过 font-size 计算 --d（需配合 JS 或 calc 处理）*/   /* 更简洁的实践：直接在 background-image 中用 calc 引用 font-size */   .loader {background-image: radial-gradient(#363636 calc(1em * 1), transparent 1px);   }   @keyframes loaderout {0%   { font-size: 10px;}     100% {font-size: 0.7px;}   } }

? 推荐简化回退写法（无 JS）：
若仅需基础兼容，可改用 transform: scale() 模拟缩放感（虽非真渐变变化，但视觉效果接近且 100% 兼容）：
.loader {background-image: radial-gradient(#363636 10px, transparent 1px);   background-size: 30px 30px;   transform-origin: center; } @keyframes loaderout {0%   { transform: scale(1); }   100% {transform: scale(0.5); } }