Making loop in CSS Stylus more efficient

I'm not sure if this could be more efficient because I don't think I should need 2 keyframe loops in addition to the for loop?

for i in (1..19)
.l:nth-child({i}) 
n = (20 - i) 
height 0
if i >= 10
  margin-left ((n * n) * (1.25/n)) + 17 px 
  box-shadow 0px 0px (n+4)px 0 rgba(40,70,200, 0.5),0px 0px (i+8)px 0 rgba(80,100,235, 0.45),0px 0px 14px 0 rgba(115,215,235, 0.35),0px 0px 23px 0 rgba(110,130,215, 0.5)
  width (n * 1.05) + 0px
  animation (heights- + i) 0.75s (n/80)s linear forwards
else 
  margin-left ((i * i) * (1.25/i)) + 17 px 
  box-shadow 0px 0px (i+4)px 0 rgba(40,70,200, 0.5),0px 0px (i+8)px 0 rgba(80,100,235, 0.45),0px 0px 14px 0 rgba(115,215,235, 0.35),0px 0px 23px 0 rgba(110,130,215, 0.5)
  width (i * 1.05) + 0px 
  animation (heightsx- + i) 0.75s (i/80)s linear forwards

for i in (10..19)
n = (20 - i)
$keyframe-name = (heights- + i)
@keyframes {$keyframe-name} 
  0% 
    height 0
  91% 
    height ((n + 4) * 1.4) px
  98% 
    height ((i + 38) * 5.4) px
  100%
    height ((n + 38) * 4.4) px
    opacity (n/6)
    if i == 10 
    height ((i + 43) * 4.4) px
    opacity (i/6)

for i in (1..9)
$keyframe-namex = (heightsx- + i)
@keyframes {$keyframe-namex} 
  0% 
    height 0
  91% 
    height ((i + 4) * 1.4) px
  98% 
    height ((i + 38) * 5.4) px
  100%
    height ((i + 38) * 4.4) px
    opacity (i/16)

Based on what I can tell of these three loops is that they are not nested, which means that you are running one loop for the whole range of 1-19 another loop for the range of 1-9 (which you already went over once) and another loop for the range of 10-19 which you have already looped over as well. and the first loop that goes over the entire range already divides the top half from the bottom half to change other things, I may be looking at this all wrong, but I put the last two loops inside the first loops if-then statements and came up with this

for i in (1..19)
  .l:nth-child({i}) 
  n = (20 - i) 
  height 0
  if i >= 10
    margin-left ((n * n) * (1.25/n)) + 17 px 
    box-shadow 0px 0px (n+4)px 0 rgba(40,70,200, 0.5),0px 0px (i+8)px 0 rgba(80,100,235, 0.45),0px 0px 14px 0 rgba(115,215,235, 0.35),0px 0px 23px 0 rgba(110,130,215, 0.5)
    width (n * 1.05) + 0px
    animation (heights- + i) 0.75s (n/80)s linear forwards

    $keyframe-name = (heights- + i)
    @keyframes {$keyframe-name} 
      0% 
        height 0
      91% 
        height ((n + 4) * 1.4) px
      98% 
        height ((i + 38) * 5.4) px
      100%
        height ((n + 38) * 4.4) px
        opacity (n/6)
        if i == 10 
          height ((i + 43) * 4.4) px
          opacity (i/6)

  else 
    margin-left ((i * i) * (1.25/i)) + 17 px 
    box-shadow 0px 0px (i+4)px 0 rgba(40,70,200, 0.5),0px 0px (i+8)px 0 rgba(80,100,235, 0.45),0px 0px 14px 0 rgba(115,215,235, 0.35),0px 0px 23px 0 rgba(110,130,215, 0.5)
    width (i * 1.05) + 0px 
    animation (heightsx- + i) 0.75s (i/80)s linear forwards

    $keyframe-namex = (heightsx- + i)
    @keyframes {$keyframe-namex} 
      0% 
        height 0
      91% 
        height ((i + 4) * 1.4) px
      98% 
        height ((i + 38) * 5.4) px
      100%
        height ((i + 38) * 4.4) px
        opacity (i/16)

I agree with @Cimmanon in that you would get more answers to this question if we had somewhere that we could run the code and tinker with it a little bit. I assume that you would have done it this way to begin with unless there was another reason for doing it this way.

I also moved some variables around to merge them and use them in other expressions.

like

animation (heights- + i) 0.75s (n/80)s linear forwards

    $keyframe-name = (heights- + i)
    @keyframes {$keyframe-name} 
      0% 
        height 0
      91% 
        height ((n + 4) * 1.4) px
      98% 
        height ((i + 38) * 5.4) px
      100%
        height ((n + 38) * 4.4) px
        opacity (n/6)
        if i == 10 
          height ((i + 43) * 4.4) px
          opacity (i/6)

you create $keyframe-name to hold the value heights- + i when you could have just put that expression into @keyframes{heights- + i}, but since we merged the two for loops into one we can use $keyframe-name like this

$keyframe-name = (heights- + i)
animation ($keyframe-name) 0.75s (n/80)s linear forwards
@keyframes {$keyframe-name} 
  0% 
    height 0
  91% 
    height ((n + 4) * 1.4) px
  98% 
    height ((i + 38) * 5.4) px
  100%
    height ((n + 38) * 4.4) px
    opacity (n/6)
    if i == 10 
      height ((i + 43) * 4.4) px
      opacity (i/6)

and do the same thing inside the else statement

$keyframe-namex = (heightsx- + i)
animation ($keyframe-namex) 0.75s (i/80)s linear forwards
@keyframes {$keyframe-namex} 
  0% 
    height 0
  91% 
    height ((i + 4) * 1.4) px
  98% 
    height ((i + 38) * 5.4) px
  100%
    height ((i + 38) * 4.4) px
    opacity (i/16)

StackExchange Code Review Q#61438, answer score: 3