我完全不了解 @property，但我看到它即将进入 Chrome，所以我猜了解它是个好主意！
有一个草案规范 和一个“发布意向”文档。 该文档中的代码显示
@property --my-property {
syntax: "<color>";
initial-value: green;
inherits: false;
}我们现在在自定义属性完整指南 中提供了更多关于这一切的信息。
这是 CSS 与 CSS.registerProperty() 的精确等价物，它是用于声明 CSS 自定义属性的 JavaScript 语法，也是一件新事物（似乎在 Houdini 伞下）。
看起来你声明这些不是在选择器块内，而是在外面（比如 @media 查询），而且一旦你声明了，你实际上还没有创建新的自定义属性，你只是注册了你可能稍后会创建的事实。 当你真正去创建/使用自定义属性时，你会像现在一样在选择器块内创建它。
“常见的用例”非常酷。 现在，这在 CSS 中不可行
.el {
background: linear-gradient(white, black);
/* this transition won't work */
transition: 1s;
}
.el:hover {
background: linear-gradient(red, black);
}你可能会认为渐变中的白色会随着 transition 逐渐变为红色，但事实并非如此，它不能以这种方式进行过渡。 以前，如果我们需要这样做，我们会使用一些技巧，比如用新的渐变颜色淡入伪元素，或者转换比元素更宽的渐变的 background-position 来伪造它。
听起来现在我们可以…
@property --gradient-start {
syntax: "<color>";
initial-value: white;
inherits: false;
}
.el {
--gradient-start: white;
background: linear-gradient(var(--gradient-start), black);
transition: --gradient-start 1s;
}
.el:hover {
--gradient-start: red;
}可以推测，这现在之所以有效，是因为我们告诉 CSS 此自定义属性是 <color>，因此它可以像颜色一样被处理/动画，这是以前不可能的。
让我想起了我们使用 attr() 函数从元素中提取 data-size="22px" 时，我们实际上无法使用 <length> 22px，它只是一个字符串。 但是也许将来我们会得到 attr(data-size px);
我不知道 @property 什么时候才能真正使用，但看起来 Chrome 会率先发布，Safari 和 Firefox 也发出了积极的信号。 👍
好的，如果我们进行一些自定义操作，这种过渡将成为可能，那么为什么默认情况下它不可能呢？
我可能错了，但我相信它是这样工作的：渐变就像生成的图像，所以目前这类似于要求浏览器将背景图像从
white-black.jpg过渡到red-black.jpg，这是它做不到的。正如 Christopher 所说，这是完全正确的。 你实际上是在转换背景图像，这是不可能的
在“定义和用法”下，
可动画：否好吧，我知道浏览器是如何处理它的。 问题仍然是——为什么我们无法使用 CSS 以任何方式做到这一点时，它无法更好地处理它。
@Łukasz 在自定义属性的情况下，动画的是渐变的颜色停止，而不是渐变图像本身。 对我来说，这意味着浏览器将为过渡的每一步重新计算一个新图像。
我确实理解你问的是什么，你明白我的意思。 为什么浏览器目前无法为每一步创建一个图像？ 我认为答案是，它不应该读取渐变图像的每个值（颜色停止），因为你可能会添加颜色停止（例如），阻止这种行为——可能要插值的东西太多了？ 这只是我的直觉，可能错了； 我还没有详细阅读规范。
这太棒了。 我记得在很久以前读过关于AmeliaBR 的提议。 我很高兴看到它终于实现了！ 这虽然是一个小小的胜利，但它将使许多作者的生活更轻松，我认为——所有内容都集中在一个地方。