<div class="box"></div>
$n:100;
.box{
  width:200px;
  height: 100px;
  background-image: linear-gradient(45deg,orange 0%,pink 0);
  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 0);
    }
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.