@property 是 CSS Houdini API 的一部分，允许开发者显式定义自定义属性的语法类型、初始值和继承行为。它让浏览器知道自定义属性（如 --my-color）存储的是什么类型的数据（颜色、长度、角度等），从而能够在动画中平滑插值，而不是简单地在关键帧之间跳变。

可以把它理解为给 CSS 自定义属性添加了"类型注解"，类似于 TypeScript 对 JavaScript 的增强。

核心问题：浏览器不知道如何插值。在没有 @property 的情况下，CSS 自定义属性被当作字符串处理。当动画在两个值之间切换时，浏览器无法计算中间值，导致动画在关键帧处瞬间跳变（离散过渡），而不是平滑渐变。

例如，--color 从红色变到蓝色时，没有类型信息的话，浏览器不知道需要在 RGB 色彩空间中计算中间色，只能直接跳变。有了 syntax: '<color>'，浏览器就知道该属性是颜色类型，可以平滑插值。

🔍 查看上方演示中的对比小球：左侧（无 @property）跳变，右侧（有 @property）平滑过渡。

CSS @property 支持以下类型值：

还可以使用 | 组合多个类型，如 <length> | <percentage>。

截至 2024 年：

• ✅ Chrome 85+：完全支持
• ✅ Edge 85+：完全支持
• ✅ Opera 71+：完全支持
• ✅ Safari 17.2+：已支持
• ⚠️ Firefox：部分支持（需开启 layout.css.property-and-value-api.enabled 标志）

可使用 CSS.registerProperty 的 JS API 进行特性检测，或使用 @supports 规则进行渐进增强。

两种方式定义同一个功能：

• @property：纯 CSS 方式，在样式表中声明，适合静态定义
• CSS.registerProperty()：JavaScript API，适合动态注册，在运行时按需定义

两者效果相同。本演示工具使用 JS API 动态注册属性，同时展示对应的 CSS @property 代码。JS API 的优势是可以根据用户交互动态调整属性定义。

• 渐变背景动画：使用 <color> 类型实现背景色平滑过渡
• 动态主题切换：结合 <color> 类型实现主题色平滑切换
• 加载动画：使用 <angle> 实现渐变旋转动画
• 交互微动效：悬停时数字/长度平滑过渡，增强用户体验
• 数据可视化：图表中颜色/尺寸的动态过渡
• CSS 艺术：复杂动画效果，不再依赖 JavaScript

方法一：JS 特性检测

if ('registerProperty' in CSS) {
  // 支持 CSS.registerProperty
  console.log('✅ @property 可用');
} else {
  console.log('⚠️ 不支持，使用回退方案');
}

方法二：CSS @supports（部分支持）

@supports (--custom: 1) {
  /* 自定义属性基本支持 */
}

建议始终提供合理的回退样式，确保在不支持 @property 的浏览器中也有可用的体验。