较少的动画循环不起作用

Question

我正试图产生这个：

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

真的很感激帮助，我会不断地使用不同的语法，但似乎没有任何工作。