<div class="anim-1"><span>from/to</span></div>
<div class="anim-2"><span>%</span></div>
<div class="anim-3"><span>from % to</span></div>

div {
  width: 100px;
  height: 100px;
  margin: 10px;
  display: inline-block;
  background-color: red;

  animation-duration: 6s;
  animation-iteration-count: infinite;
  animation-direction: alternate-reverse;
}
div > span {
  display: block;
  position: relative;
  text-align: center;
  top: 40%;
}

.anim-1 {
  animation-name: anim1;
}
.anim-2 {
  animation-name: anim2;
}
.anim-3 {
  animation-name: anim3;
}

@keyframes anim1 {
  from {
    background-color: red;
  }
  to {
    background-color: green;
  }
}

@keyframes anim2 {
  0% {
    background-color: red;
  }
  50% {
    background-color: yellow;
  }
  100% {
    background-color: green;
  }
}

@keyframes anim3 {
  from {
    background-color: red;
  }
  50% {
    background-color: yellow;
  }
  to {
    background-color: green;
  }
}