こんなコードになった。

li {
  ...

  $r: 40;

  @for $t from 1 through 100 {
    &:nth-child(#{$t}) {
      // 色
      $hue: (360 / 100) * $t;
      $color: hsl($hue, 100, 68);
      background-color: $color;

      // アニメーション
      animation-name: scale#{$t};
      animation-duration: calc(100s / #{$t});
      animation-timing-function: ease-in-out;
      animation-direction: alternate;
      animation-iteration-count: infinite;

      // それぞれ100%のときの座標が違うので、点ごとに@keyframesが必要になる
      @keyframes scale#{$t} {
        0% {
          transform: translate(0, 0);
        }
        100% {
          // 円周上に点を配置
          $angle: (360 / 100) * (pi() / 180) * $t;
          $x: $r * cos($angle) + vmin;
          $y: $r * sin($angle) + vmin;
          transform: translate($x, $y);
        }
      }
    }
  }
}

@keyframesの100%の指定は省略できるので、こんなふうにも書ける。@keyframesをfor文の直下においている。このほうが$rと$x（または$y）の計算式が近く、関係が見えやすいかもしれない。

li {
   ...

   @for $t from 1 through 100 {
    &:nth-child(#{$t}) {
      // 円周上に点を配置
      $angle: (360 / 100) * (pi() / 180) * $t;
      $x: $r * cos($angle) + vmin;
      $y: $r * sin($angle) + vmin;

      ...
    }

    // それぞれ100%のときの座標が違うので、点ごとに@keyframesが必要になる
    @keyframes scale#{$t} {
      0% {
        transform: translate(0, 0);
      }
    }
  }
}