我一直在努力使它工作一段时间。
关键是内部div将具有某种形状，并且可能会有多个形状（这就是我使用nth-child选择器的原因）。应该显示此内部div，然后将其再次隐藏一段时间。问题是，我想在一个动画中为所有（后来的）多个内部div设置动画。为此，我认为我可以使用CSS变量，但这似乎不起作用。
在这个示例中，我试图归档的是内部div基本上只是通过使用变量来闪烁。但是我在Firefox中的结果只是一个黑匣子。
我有什么想念的吗？我已经检查了是否可以在其中使用CSS变量，@keyframes并且可以肯定。动画中它们的唯一问题似乎是它们之间没有插值，但是它们突然切换，在这种情况下这不是问题。
@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>