Is there a way to rotate a CSS element with a ::before pseudo class to display a linear-gradient that rotates from 0 degrees to 360 degrees?

Question

Problem Definition

I have a div tag that has a border-radius of 50% to display a circle. Here is the HTML code below:

.pie-wrapper {
  height: 2.5em;
  width: 2.5em;
  margin: 15px auto;
  position: relative;
}

.pie-wrapper--solid {
  border-radius: 50%;
  overflow: hidden;
}

.pie-wrapper--solid:before {
  border-radius: 0 100% 100% 0 / 50%;
  content: "";
  display: block;
  height: 100%;
  margin-left: 50%;
  transform-origin: left;
}

.pie-wrapper--solid.progress-88 {
  border: 5px ridge blue;
  background: linear-gradient(to right, springgreen 50%, #ff0000 50%);
}

.pie-wrapper--solid.progress-88:before {
  background: springgreen;
  transform: rotate(0deg);
  animation-name: change-color;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
  animation-direction: normal;
}


/* Keyframes */

@keyframes change-color {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(180deg);
  }
}

<div class="pie-wrapper pie-wrapper--solid progress-88">
</div>

What I Tried

I applied a linear-gradient to create a background with two colors. I went ahead to try different linear-gradient types such as to left, to bottom, to top etc. This didn't achieve the purpose.

The Expectation

The animation rotates to 180 degrees as expected but any number above rotate(180deg) will not cover the expected portions of the pie. The goal is for the red part to fully cover the green part in the animation keyframes at rotate(360deg) i.e a complete red circle. I would also like the animation to rotate anti-clockwise, this can be achieved by placing a negative value inside the rotate function.