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

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

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

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

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

✅ 正确方案：@property + 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 */
}</length>

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

? 关键点说明：

syntax: "" 显式声明 --d 为长度类型，使浏览器能正确解析并插值 10px → 0.7px；

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

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

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

⚠️ 兼容性处理：Firefox 回退方案

目前 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); }
}