<div class="box"></div>

$n:100;
.box{
  width:200px;
  height:100px;
  background-image:linear-gradient(45deg,orange,0%,pink);
  animation: play 2s steps(1) infinite alternate;
}

@keyframes play{
  @for $i from 1 through $n{
    $p:percentage($i/100);
    #{$i}% {
      background-image: linear-gradient(45deg,orange,$p,pink);
    }
  }
}