css - 这可能吗？使用 CSS (Stylus) 迭代@keyframes

Question

我在 Stylus 中有这段代码:

for i in (1..3)
  .l:nth-child({i})
     opacity (i / 5)

哪些输出:

.l:nth-child(1) {
opacity: 0.2;
}
.l:nth-child(2) {
opacity: 0.4;
 }
.l:nth-child(3) {
 opacity: 0.6;
}

这很好，但我想改变它，使不透明度在开始时为 0，并在动态使用 @keyframes 后设置；

@keyframes o 
0%
 opacity 0 
100%  
  for i in (1..3)
  opacity (i / 5) 

返回，明显不正确:

100% {
opacity: 0.2;
opacity: 0.4;
opacity: 0.6;
}

不确定该怎么做，我需要使用函数吗？谢谢你的时间!我想要的结果应该是这样的:

100% {
.l:nth-child(1) {
opacity: 0.2;
}
.l:nth-child(2) {
opacity: 0.4;
 }
.l:nth-child(3) {
 opacity: 0.6;
}
}

Answer 1

我通过为每次迭代创建一个关键帧来做到这一点:

for i in (1..3)
 $keyframe-name = (o- + i)
 @keyframes {$keyframe-name} 
   0% 
   100%
    opacity (i/5)

然后动画:

for i in (1..3)
 .l:nth-child({i})
   opacity 0
   animation (o- + i) 0.25s (i/5)s linear forwards  

感谢@DJDavid98 的评论。