Animation “更少”中的动画循环不起作用

我正在尝试生成以下内容：

@keyframes move {

0% { transform: translateY(12.6362937434469px)}
1% { transform: translateY(17.0398631884564px)}
2% { transform: translateY(26.8988457853083px)}
3% { transform: translateY(40.3725348537822px)}
4% { transform: translateY(55.3796708482273px)}
5% { transform: translateY(69.8839929760395px)}
6% { transform: translateY(82.1419149981669px)}
7% { transform: translateY(90.8858638077591px)}
8% { transform: translateY(95.4277979071359px)}
9% { transform: translateY(95.6790818947141px)}
10% { transform: translateY(92.0937083365851px)}

}

但我不确定如何在更少的时间内完成（将“px”放在最后以及所有东西）

我试过：

@keyframes move { 
    .loop (@index) when (@index <100) {
        .loop (@index + 1);
        @index*1% {transform: translateY(@index*1px)}
    }
}

#dots {
    fill: orange;
    animation: move 5s linear infinite;
}

@关键帧移动{
.loop（@index）何时（@index）你尝试了什么？到目前为止，你的Q看起来像是“为我编写代码”。更好！你差不多做到了。你的loop mixin定义几乎正确，唯一缺少的是该mixin的调用。请参阅（“启动循环”行）。（不算100步线性移动没有多大意义）。此外，请注意，
@index*1%
表达式不能用作帧标识符（关键帧ID和选择器都不能有任意表达式，只能在其中使用）。因此，总之，您的代码最终看起来会有些许变化。