creating css keyframes in loop

Question

I am trying to create a bunch of animations that should be calculated. I am omitting the actual calculation of those animations here as they are not relevant. The problem I am having is in producing the correct @keyframes constructs.

here is my stripped back less:

.Entry(@animCount, @frameResolution)
{
    .CreateAnim(@animNum) when (@animNum =< @animCount)
    {
        @keyframesname: ~'MyAnimation-@{animNum}';
        .frame(@frame) when (@frame =< 100%)
        {
            @{frame}
            {
                hello1: @frame;
                hello2: @animNum;
            }
            // .frame( ((@frame + @frameResolution)) );
        }

        @keyframes @keyframesname {
            .frame(0%);
        }
        .CreateAnim(((@animNum + 1 )));
    }
    .CreateAnim(1);
}

and this is how it might be called:

.Entry(3, 50%);

I'm compiling it like so: lessc -m=strict-legacy bug.less bug.css

I expected output such as this:

@keyframes MyAnimation-1 {
  0% {
    hello1: 0%;
    hello2: 1;
  }
}
@keyframes MyAnimation-2 {
  0% {
    hello1: 0%;
    hello2: 2;
  }
}
@keyframes MyAnimation-3 {
  0% {
    hello1: 0%;
    hello2: 3;
  }
}

But in fact MyAnimation-1 also contains all the keyframes from MyAnimation-2 and MyAnimation-3, while MyAnimation-2 contains also contains all the keyframes from MyAnimation-3

Is this a bug in less, or have I done something wrong?

$lessc --version
lessc 3.9.0 (Less Compiler) [JavaScript]