我一直试图让它工作一段时间。
关键是内部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>
答案 0 :(得分：6)
如specification中所述：
值得注意的是，他们甚至可以过渡或动画，但自从UA开始 无法解释其内容，他们总是使用＆＃34;翻转 50％＆＃34;用于任何其他不可能的值的行为 智能插值。但是，中使用的任何自定义属性 @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>
答案 1 :(得分：2)
这可以通过使用@property来定义变量来实现，https://web.dev/at-property/#writing-houdini-custom-properties允许声明类型并允许浏览器“理解”例如，某个属性（变量）是 Number ，然后它可以逐渐设置动画/转换该变量。
@property --opacity {
syntax: '<number>';
initial-value: 0;
inherits: false;
}
@keyframes fadeIn {
from { --opacity: 0 }
to { --opacity: 1 }
}
body{
animation: 1s fadeIn;
opacity: var(--opacity);
background: black;
}
当前允许的类型包括：
length number percentage length-percentage color image url integer angle time resolution transform-list transform-function custom-ident（自定义标识符字符串）