这可能吗？使用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的评论。