CSS conic-gradient 默认无法直接动画化角度参数，导致动画卡顿；通过 @property 声明可动画的自定义角度变量，并在 background-image 中引用，即可实现与 transform: rotate() 同等流畅的旋转动画效果。
css `conic-gradient` 默认无法直接动画化角度参数，导致动画卡顿；通过 `@property` 声明可动画的自定义角度变量，并在 `background-image` 中引用，即可实现与 `transform: rotate()` 同等流畅的旋转动画效果。
在 CSS 中，background-image（包括 conic-gradient）本身不支持属性插值动画——即你不能直接对 conic-gradient(black 0deg, black 10deg, white 0deg) 中的角度值做关键帧动画。浏览器会将其视为离散的背景图像快照，导致跳变、闪烁或不连贯的过渡，这正是 .box2 动画不如 .box1（基于 transform: rotate()）平滑的根本原因。
要解决这一问题，现代 CSS 提供了 @property at-rule（CSS 自定义属性注册机制），它允许你声明一个类型明确、可插值、可参与动画的自定义属性。关键在于：
- 指定 syntax: "
"，让浏览器识别该变量为角度类型，从而支持线性插值； - 在 @keyframes 中仅改变该变量值；
- 在 background-image 中使用 var(--angle) 动态注入，使渐变实时响应变化。
以下是优化后的核心代码：
@property --angle {
syntax: "<angle>";
inherits: false;
initial-value: 0deg;
}
@keyframes box2 {
0% { --angle: 0deg; }
100% { --angle: 360deg; }
}
.box2 {
margin-left: 10px;
background-image: conic-gradient(black 0deg, black var(--angle), white 0deg);
animation: box2 3s linear infinite;
}</angle>
✅ 优势：
- 动画帧率稳定，无闪烁，视觉效果与 transform: rotate() 完全一致；
- 逻辑清晰，仅需一处变量控制，便于后续扩展（如暂停、反向、动态调速）；
- 兼容 Chromium 内核浏览器（Chrome 102+、Edge 102+、Opera 88+）及 Safari 16.4+。
⚠️ 注意事项：
- Firefox 当前（v128）仍不支持 @property（MDN 兼容性表），如需全浏览器兼容，可降级采用 transform + 伪元素遮罩模拟锥形渐变，或引入 JavaScript 驱动（如 requestAnimationFrame + CSS.customProperties polyfill）；
- initial-value 必须与 syntax 类型匹配（如 0deg 对应
），否则注册失败且动画无效； - inherits: false 是推荐设置，避免意外继承影响性能。
总结：@property 是原生、高效、声明式的解决方案，代表了 CSS 动画能力的重要演进。只要目标环境支持，它就是实现 conic-gradient 平滑动画的首选方式——告别硬编码、规避 JS 介入，真正践行“用 CSS 做 CSS 的事”。
