html - CSS 动画自定义属性/变量

Question

一段时间以来，我一直在努力让它发挥作用。

重点是内部 div 将具有某种形状，并且可能不止一个(这就是我使用 nth-child 选择器的原因)。这个内部 div 应该显示，然后再次隐藏一段时间。问题是，我想在一个动画中为所有(后来的)多个内部 div 设置动画。为此，我想我可以使用 CSS 变量，但这似乎不起作用。

在这个例子中我试图实现的是内部 div 基本上只是通过使用变量来闪烁。但我在 Firefox 中的结果只是一个黑框。

我错过了什么吗？我已经查过是否可以在 @keyframes 中使用 CSS 变量，并且确实可以。它们在动画中的唯一问题似乎是它们之间没有插值，而是它们突然切换，这在这种情况下不是问题。

@keyframes test{
    from{
        --one: 0;
    }
    to{
        --one: 1;
    }
}

#test{
    width: 100px;
    height: 200px;
    background-color: black;
    animation: test 1s infinite;
}
#test :nth-child(1){
    width: 20px;
    height: 20px;
    margin: auto;
    background-color: white;
    opacity: var(--one,0);
}

<div id="test">
    <div></div>
</div>

Answer 1

这可以通过使用定义变量来实现(在撰写本文时，还没有得到很好的支持)@property ，它允许声明类型，并允许浏览器“理解”，例如，某个属性(变量)是一个数字，然后它可以逐渐动画/转换那个变量。

示例代码:

@property --opacity {
  syntax: '<number>'; /* <- defined as type number for the transition to work */
  initial-value: 0;
  inherits: false;
}

@keyframes fadeIn {
  50% {--opacity: 1}
}

html {
  animation: 2s fadeIn infinite;
  background: rgba(0 0 0 / var(--opacity));
}

当前允许的类型包括:

length, number, percentage, length-percentage, color, image, url, integer, angle, time, resolution、transform-list、transform-function、custom-ident(标识符字符串)

---

有用的文章:

1. https://web.dev/at-property/#writing-houdini-custom-properties
2. https://css-tricks.com/using-property-for-css-custom-properties
3. Cool Houdini demos