css 使用@property定义自定义属性，支持动画

@property 是一个在 CSS 中用于定义自定义属性（Custom Properties，也称为 CSS 变量）的规则。自定义属性允许你在 CSS 中定义一些值，并在其他地方引用这些值，以便在样式中重复使用。

以下是 @property 的基本用法：

/* 定义自定义属性 */
@property --main-color {
  syntax: '<color>';
  initial-value: black;
}

/* 使用自定义属性 */
.element {
  color: var(--main-color);
}

在这个例子中，@property 定义了一个名为 --main-color 的自定义属性，它的初始值为黑色。然后，通过使用 var(--main-color)，你可以在其他样式中引用这个自定义属性，实现了在多个地方使用相同颜色的效果。

需要注意的是，@property 还需要浏览器的支持。虽然现代浏览器（如 Chrome、Firefox、Edge 等）支持自定义属性，但某些老旧的浏览器可能不支持。如果你需要广泛的浏览器兼容性，最好在使用自定义属性之前进行一些测试和检查。

此外，自定义属性的语法和用法还有更多高级特性，如支持不同类型的值、动态更新等。你可以在 CSS 规范中查找更多关于 @property 的信息和用法。