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

---

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

keywords:

• @property
• 自定义属性
• 动效过渡
• Typed OM
• 兼容策略

description: 使用 @property 注册可动画的自定义属性，提供类型、继承与初始值定义，使属性参与插值与过渡，并给出兼容与降级建议。

categories:

• 文章资讯
• 编程技术

---

概述

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

用法/示例

@property --angle {
  syntax: '<angle>';
  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