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

---

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

keywords:

• @property
• 自定义属性
• syntax
• inherits
• initial-value

description: "介绍 @property 的注册语法与字段（syntax/inherits/initial-value），使自定义属性参与动画与过渡，提供示例与兼容策略。"

categories:

• 文章资讯
• 编程技术

---

概述

@property 允许为 CSS 自定义属性声明类型与默认值，使其可参与过渡与动画。适用于驱动主题与动效参数（如角度、长度、颜色）。

示例

@property --angle { syntax: '<angle>'; inherits: false; initial-value: 0deg }
.spinner { --angle: 0deg; transform: rotate(var(--angle)); transition: --angle 300ms ease }
.spinner:hover { --angle: 45deg }

工程建议

• 类型匹配：为需要过渡的属性选择正确 syntax（如 <angle>/<length>/<color>）。
• 继承与默认值：根据作用域设置 inherits 与 initial-value；避免未定义导致布局异常。
• 兼容：不支持的浏览器回退到直接动画目标属性或 JS 动画；进行特性检测。

参考与验证

• MDN @property 文档：https://developer.mozilla.org/docs/Web/CSS/@property
• web.dev 指南：https://web.dev/articles/at-property
• Chrome 平台文档：https://developer.chrome.com/docs/web-platform/property-and-values-api/