Как оптимизировать анимацию в SCSS?

Добрый день, есть следующая разметка. Как из нее видно много повторений кейфрейм, т.к. для разного класса рейтинга соответствует своя длинна ротации. Есть ли способ силами SCSS оптимизировать, без 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); }
}