LESS CSS 变量代替动画百分比

Question

我正在创建几个需要在特定时间点同步的动画，即使它们具有不同的持续时间。手动计算和输入这些动画的百分比值是一项繁琐而乏味的工作。我想弄清楚如何使用 LESS 变量来表示这些动画中的百分比。

    @animation-duration:21s;
    @seconds:21;
    @percentpersecond:calc(100/@seconds);

    @1: calc(1 * @percentpersecond)%;
    @2: calc(2 * @percentpersecond)%;
    @3: calc(3 * @percentpersecond)%;
    @4: calc(4 * @percentpersecond)%;
    @5: calc(5 * @percentpersecond)%;
    @6: calc(6 * @percentpersecond)%;
    @7: calc(7 * @percentpersecond)%;
    @8: calc(8 * @percentpersecond)%;
    @9: calc(9 * @percentpersecond)%;
    @10: calc(10 * @percentpersecond)%;
    @11: calc(11 * @percentpersecond)%;
    @12: calc(12 * @percentpersecond)%;
    @13: calc(13 * @percentpersecond)%;
    @14: calc(14 * @percentpersecond)%;
    @15: calc(15 * @percentpersecond)%;
    @16: calc(16 * @percentpersecond)%;
    @17: calc(17 * @percentpersecond)%;
    @18: calc(18 * @percentpersecond)%;
    @19: calc(19 * @percentpersecond)%;
    @20: calc(20 * @percentpersecond)%;
    @21: calc(21 * @percentpersecond)%;
    

    @keyframes scroll-up-better21{
       0% {
        transform: translateY(0);
      }
      
      /*bounce down*/ 3.75%{
        transform: translateY(0%);
      }
    @3 {
        transform: translateY(10%);
      }
    @3 {
        transform: translateY(-100%);
      }
     @6 {
        transform: translateY(-100%);
      }
     @7 {
        transform: translateY(-200%);
      }
      @9 {
        transform: translateY(-200%);
      }
      @10 {
        transform: translateY(-300%);
      }
      @12 {
        transform: translateY(-300%);
      }
      @13 {
    transform: translateY(0%);
      }
      @21 {
        transform: translateY(0%);
      }
    }

我不知道我是不是把它搞砸了，还是不能以这种方式使用 LESS 变量。