这可能吗?使用CSS(手写笔)迭代@关键帧

这可能吗?使用CSS(手写笔)迭代@关键帧,css,node.js,iteration,stylus,css-animations,Css,Node.js,Iteration,Stylus,Css Animations,我在手写笔中有以下代码: 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

我在手写笔中有以下代码:

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;
}
}

我通过为每次迭代创建一个关键帧来实现:

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的评论。

所有元素都需要一组不同的关键帧,不能将选择器放入关键帧的步长定义中,只能
property:value双人。啊,我想是的,谢谢你!你的意思是我最终会有:关键帧o1,关键帧o2,关键帧o3。。。等等,每一个不透明度在那里?