如何使用 CSS 自定义属性实现径向渐变的平滑缩放动画-html教程-PHP中文网

如何使用 CSS 自定义属性实现径向渐变的平滑缩放动画

本文详解如何通过 CSS @property 声明自定义动画属性，结合 radial-gradient 与关键帧，解决径向渐变半径突变导致动画卡顿的问题，并提供 Firefox 兼容方案。

本文详解如何通过 css `@property` 声明自定义动画属性，结合 `radial-gradient` 与关键帧，解决径向渐变半径突变导致动画卡顿的问题，并提供 firefox 兼容方案。

在 CSS 中直接对 background-image 中的值（如 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 引发渲染异常 */
}</length>

? 关键点说明：

@property --d 显式声明 --d 为类型，使浏览器能对其执行数值插值；

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 倍 */
}