How to optimize animation in SCSS?

Question

css

Good afternoon, there is the following markup. As you can see from it, there are many repetitions of the keyframe, because for a different rating class, there is a corresponding rotation length. Is there a way to optimize with SCSS, without js?

<div class="radial low one">
      <div class="circle left rotate"><span></span></div>
      <div class="circle right rotate"><span></span></div>

      <h4 class="rating txt-bold">2,9</h4>
</div>

.radial {
  position: relative;
  .rating {
    position: absolute;
    width: 4rem;
    text-align: center;
    top: .5rem;
    left: .1rem;
  }
  .circle.left {
    position: absolute;
    clip: rect(0, 4.2rem, 4.2rem, 2.2rem);
  }
  .circle.right {
    position: absolute;
    clip: rect(0, 2.2rem, 4.2rem, 0);
  }
  .circle span {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 100%;
    position: absolute;
    opacity: 1;
  }
  .circle.left span {
    clip: rect(0, 2.2rem, 4.2rem, 0);
    animation: rotate-left 2s ease-in;
    animation-fill-mode: forwards;
  }

  .circle.right span {
    clip: rect(0, 4.2rem, 4.2rem, 2.2rem);
    animation: rotate-right 2s ease-out;
    animation-fill-mode: forwards;
  }
  &.low {
    .circle span {
      border: .3rem solid $rating-low-lightgray;
    }
    &.one {
      .circle.left span {
        animation: rotate-left-1 2s  ease-in;
        animation-fill-mode: forwards;
      }
    }
    &.two {
      .circle.left span {
        animation: rotate-left-2 2s  ease-in;
        animation-fill-mode: forwards;
      }
    }
    &.three {
      .circle.left span {
        animation: rotate-left-3 2s  ease-in;
        animation-fill-mode: forwards;
      }
    }
  }
  &.high {
    .circle span {
      border: .3rem solid $rating-high-success;
    }
    &.four {
      .circle.left span {
        animation: rotate-left-3 2s  ease-in;
        animation-fill-mode: forwards;
      }
      .circle.right span {
        animation: rotate-right-4 2s  ease-out;
        animation-fill-mode: forwards;
      }
    }
    &.five {
      .circle.left span {
        animation: rotate-left-3 2s  ease-in;
        animation-fill-mode: forwards;
      }
      .circle.right span {
        animation: rotate-right-5 2s  ease-out;
        animation-fill-mode: forwards;
      }
    }
    &.six {
      .circle.left span {
        animation: rotate-left-3 2s  ease-in;
        animation-fill-mode: forwards;
      }
      .circle.right span {
        animation: rotate-right-6 2s  ease-out;
        animation-fill-mode: forwards;
      }
    }
  }
}

@keyframes rotate-left-1 {
  0% { transform: rotate(0deg); }
  50% { transform: rotate(60deg); }
  100% { transform: rotate(60deg); }
}

@keyframes rotate-left-2 {
  0% { transform: rotate(0deg); }
  50% { transform: rotate(120deg); }
  100% { transform: rotate(120deg); }
}

@keyframes rotate-left-3 {
  0% { transform: rotate(0deg); }
  50% { transform: rotate(180deg); }
  100% { transform: rotate(180deg); }
}

@keyframes rotate-right-4 {
  0% { transform: rotate(0deg); }
  50% { transform: rotate(0deg); }
  100% { transform: rotate(60deg); }
}

@keyframes rotate-right-5 {
  0% { transform: rotate(0deg); }
  50% { transform: rotate(0deg); }
  100% { transform: rotate(120deg); }
}

@keyframes rotate-right-6 {
  0% { transform: rotate(0deg); }
  50% { transform: rotate(0deg); }
  100% { transform: rotate(180deg); }
}

Answer 1

@for loops will help here https://sass-lang.com/documentation/at-rules/contr...

@for $i from 1 through 3 {
  @keyframes rotate-left-#{$i} {
    0% { transform: rotate(0deg); }
    50% { transform: rotate(#{$i * 60}deg); }
    100% { transform: rotate(#{$i * 60}deg); }
  }
}

// не забудь заменить на rotate-right-1,2,3
@for $i from 1 through 3 {
  @keyframes rotate-right-#{$i} {
    0% { transform: rotate(0deg); }
    50% { transform: rotate(0deg); }
    100% { transform: rotate(#{$i * 60}deg); }
  }
}

But you can go further by giving up left/right

@for $i from 1 through 6 {
  $stage_0: 0;
  $stage_1: 0;
  $stage_2: $i * 60;
  
  @if $i <= 3 {
    $stage_1: $i * 60;
  }
  @else {
    $stage_2: $stage_2 - 180;
  }
  
  @keyframes rotate-#{$i} {
    0% { transform: rotate(#{$stage_0}deg); }
    50% { transform: rotate(#{$stage_1}deg); }
    100% { transform: rotate(#{$stage_2}deg); }
  }
}