Is this possible? Iterating @keyframes with CSS (Stylus)

I have this code in Stylus:

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

Which outputs:

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

Which is great, but I want to change this so that the opacity is 0 at the start and to be set after using @keyframes dynamically;

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

Returns, the obviously incorrect:

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

Not sure how to do this, do I need to use a function? Thanks for your time! The result I want should look like this:

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