CSS @property 自定义属性注册演示

@property 是 CSS Houdini API 的一部分，允许开发者显式定义自定义属性（CSS变量）的语法类型、初始值和继承行为。它让浏览器知道自定义属性存储的是什么类型的数据（如颜色、长度、角度等），从而支持动画插值和类型检查。语法格式：
@property --my-prop { syntax: '<color>'; initial-value: red; inherits: false; }

在没有 @property 之前，CSS 自定义属性被浏览器视为任意字符串，无法进行类型推断，因此动画和过渡无法在自定义属性上正常工作。例如，background: linear-gradient(var(--angle), red, blue) 中的 --angle 无法平滑过渡。@property 通过声明语法类型（如 <angle>）让浏览器能够正确插值，实现流畅动画。

支持的语法类型包括：
<color> — 颜色值
<length> — 长度值（px, em, rem等）
<number> — 纯数字
<percentage> — 百分比
<angle> — 角度（deg, rad等）
<time> — 时间（s, ms）
<integer> — 整数
<transform-function> — 变换函数
还可使用 + 表示空格分隔的多值，| 表示可选类型。

Chrome 85+、Edge 85+、Opera 71+ 完全支持；Safari 16.4+ 开始支持；Firefox 目前（截至2025年）在 layout.css.property-and-value-api.enabled 标志后实验性支持。对于不支持的浏览器，自定义属性仍可使用，只是动画会回退为步进切换。可使用 @supports (animation: test 1s) 或 JavaScript 检测。

除了 CSS @property，还可以使用 JavaScript 的 CSS.registerProperty() 方法动态注册：
CSS.registerProperty({
  name: '--my-prop',
  syntax: '<color>',
  initialValue: '#ff0000',
  inherits: false
});
这对于动态创建的自定义属性非常有用，且可以在运行时根据条件注册不同的属性。

inherits: true 表示该自定义属性的值会从父元素继承（类似 color、font-size 等继承属性）；inherits: false 表示不继承，每个元素使用自己的值或回退到 initial-value。合理设置继承行为可以优化性能和避免意外的样式污染。

1. 渐变动画 — 旋转渐变角度、动态渐变颜色
2. 主题切换 — 颜色属性的平滑过渡
3. 微交互动效 — 按钮hover时颜色/阴影平滑变化
4. 数据可视化 — 图表颜色的动态过渡
5. 加载动画 — 进度条颜色平滑渐变
6. 滚动驱动动画 — 结合scroll-timeline实现高级效果

可以使用 CSS Houdini 的 Paint Worklet、Canvas、SVG 动画 或 JavaScript requestAnimationFrame 来模拟。但这些方案要么代码复杂，要么性能不如原生CSS动画。@property 提供了最简洁、性能最好的解决方案——直接利用浏览器原生动画引擎进行插值。