插值数字 CSS 变量

我们可以很容易地在 CSS 中创建变量

:root {
  --scale: 1;
}

我们可以在任何元素上声明它们

.thing {
  transform: scale(var(--scale));
}

对于像这样的示例，一个更好的方法是在用户交互（例如 :hover）上应用变量

:root {
  --scale: 1;
}

.thing {
  height: 100px;
  transform: scale(var(--scale));
  width: 100px;
}

.thing:hover {
  --scale: 3;
}

但是，如果我们想在动画中使用该变量… 不行。

:root {
  --scale: 1;
}

@keyframes scale {
  from { --scale: 0; }
  to { --scale: 3; }
}

/* Nope! */
.thing {
  animation: scale .25s ease-in;
  height: 100px;
  width: 100px;
}

这是因为该变量被识别为字符串，而我们需要的是一个可以在两个数字值之间插值的数字。这就是我们可以调用 @property 的地方，它不仅将变量注册为自定义属性，还将它的语法定义为数字

@property --scale {
  syntax: "<number>";
  initial-value: 1;
  inherits: true;
}

现在我们得到了动画！

您需要 查看浏览器支持，因为 @property 仅在 Chrome（从 版本 85 开始）中可用（截至本文撰写之时）。如果您希望使用 @supports 来嗅探它，我们目前不走运，因为它不接受 @ 规则作为值… 还没有。这将在 at-rule() 成为真正的东西 之后发生。