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 定义变量来实现（截至撰写本文时，还没有得到很好的支持），它允许声明 types 并允许浏览器“理解”，例如，某个属性（变量）是一个数字，然后它可以逐渐为该变量设置动画/过渡。

示例代码：

@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, resolution, @98654338@, @987654338 , 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

Answer 2

如specification中所述：

动画：无

还有

值得注意的是，它们甚至可以过渡或动画，但由于 UA 无法解释其内容，他们总是使用“flips at 50%”的行为，用于任何其他无法实现的值对 智能插值。但是，任何在中使用的自定义属性 @keyframes 规则被动画污染，这会影响它的方式 在动画中通过 var() 函数引用时进行处理 属性。

---

因此，即使您在关键帧中使用 opacity 和 var()，它也不会产生动画效果：

@keyframes test {
  from {
    --one:0;
    opacity: var(--one);
  }
  to {
    opacity: var(--one);
    --one: 1;
  }
}

#test {
  width: 100px;
  height: 200px;
  background-color: black;
}

#test :nth-child(1) {
  width: 20px;
  height: 20px;
  margin: auto;
  background-color: white;
  animation: test 1s  infinite;
  
}

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

顺便说一句，如果您将其用作transition，则可以使其正常工作，因为在这种情况下，您将对不透明度而不是自定义属性应用过渡：

#test {
  width: 100px;
  height: 200px;
  background-color: black;
}

#test:hover {
  --one:1;
}

#test :nth-child(1) {
  width: 20px;
  height: 20px;
  margin: auto;
  background-color: white;
  opacity: var(--one,0);
  transition:1s all;
}

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