CSS @property：注册自定义属性与过渡

概述

@property 允许为 CSS 自定义属性声明类型、继承与初始值，使其可参与动画与插值。适用于色彩、长度与角度等场景，提升动效与主题化能力。

用法/示例

@property --angle {
  syntax: '';
  inherits: false;
  initial-value: 0deg;
}

.box {
  transition: --angle 300ms ease;
  transform: rotate(var(--angle));
}
.box:hover { --angle: 20deg }

工程建议

• 为属性选择合适的 syntax，确保插值与过渡符合预期。
• 与 Typed OM 配合在 JS 中安全读写值；不支持环境下使用传统变量或直接属性过渡。
• 控制属性数量与作用域，避免全局污染与解析开销。

参考与验证

• MDN：@property — https://developer.mozilla.org/docs/Web/CSS/@property
• web.dev：Houdini — https://web.dev/articles/houdini