@keyframes colored {
  0% {
    background-image: -webkit-linear-gradient(left,#c4e17f,#c4e17f 12.5%,#f7fdca 12.5%,#f7fdca 25%,#fecf71 25%,#fecf71 37.5%,#f0776c 37.5%,#f0776c 50%,#db9dbe 50%,#db9dbe 62.5%,#c49cde 62.5%,#c49cde 75%,#669ae1 75%,#669ae1 87.5%,#62c2e4 87.5%,#62c2e4);
    background-image: -moz-linear-gradient(left,#62c2e4);
    background-image: -o-linear-gradient(left,#62c2e4);
    background-image: linear-gradient(to right,#62c2e4);
  }
  12.5% {
    background-image: -webkit-linear-gradient(left,#62c2e4,#62c2e4 12.5%,#c4e17f 25%,#f7fdca 37.5%,#fecf71 50%,#f0776c 62.5%,#db9dbe 75%,#c49cde 87.5%,#669ae1);
    background-image: -moz-linear-gradient(left,#669ae1);
    background-image: -o-linear-gradient(left,#669ae1);
    background-image: linear-gradient(to right,#669ae1);
  }
  25% {
    background-image: -webkit-linear-gradient(left,#669ae1,#669ae1 12.5%,#62c2e4 25%,#c4e17f 37.5%,#f7fdca 50%,#fecf71 62.5%,#f0776c 75%,#db9dbe 87.5%,#c49cde);
    background-image: -moz-linear-gradient(left,#c49cde);
    background-image: -o-linear-gradient(left,#c49cde);
    background-image: linear-gradient(to right,#c49cde);
  }
  37.5% {
    background-image: -webkit-linear-gradient(left,#c49cde,#c49cde 12.5%,#669ae1 25%,#62c2e4 37.5%,#c4e17f 50%,#f7fdca 62.5%,#fecf71 75%,#f0776c 87.5%,#db9dbe);
    background-image: -moz-linear-gradient(left,#db9dbe);
    background-image: -o-linear-gradient(left,#db9dbe);
    background-image: linear-gradient(to right,#db9dbe);
  }
  50% {
    background-image: -webkit-linear-gradient(left,#db9dbe,#db9dbe 12.5%,#c49cde 25%,#669ae1 37.5%,#62c2e4 50%,#c4e17f 62.5%,#f7fdca 75%,#fecf71 87.5%,#f0776c);
    background-image: -moz-linear-gradient(left,#f0776c);
    background-image: -o-linear-gradient(left,#f0776c);
    background-image: linear-gradient(to right,#f0776c);
  }
  62.5% {
    background-image: -webkit-linear-gradient(left,#f0776c,#f0776c 12.5%,#db9dbe 25%,#c49cde 37.5%,#669ae1 50%,#62c2e4 62.5%,#c4e17f 75%,#f7fdca 87.5%,#fecf71);
    background-image: -moz-linear-gradient(left,#fecf71);
    background-image: -o-linear-gradient(left,#fecf71);
    background-image: linear-gradient(to right,#fecf71);
  }
  75% {
    background-image: -webkit-linear-gradient(left,#fecf71,#fecf71 12.5%,#f0776c 25%,#db9dbe 37.5%,#c49cde 50%,#669ae1 62.5%,#62c2e4 75%,#c4e17f 87.5%,#f7fdca);
    background-image: -moz-linear-gradient(left,#f7fdca);
    background-image: -o-linear-gradient(left,#f7fdca);
    background-image: linear-gradient(to right,#f7fdca);
  }
  87.5% {
    background-image: -webkit-linear-gradient(left,#f7fdca,#c4e17f);
    background-image: -moz-linear-gradient(left,#c4e17f);
    background-image: -o-linear-gradient(left,#c4e17f);
    background-image: linear-gradient(to right,#c4e17f);
  }
  100% {
    background-image: -webkit-linear-gradient(left,#62c2e4);
  }
}
.colored {
  margin-top: 5px;
  margin-bottom: 5px;
  height: 7px;
  border-top: 0;
  background: #c4e17f;
  border-radius: 5px;
  background-image: -webkit-linear-gradient(left,#62c2e4);
  background-image: -moz-linear-gradient(left,#62c2e4);
  background-image: -o-linear-gradient(left,#62c2e4);
  background-image: linear-gradient(to right,#62c2e4);
  animation-name: colored;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

<hr class="colored">

我想知道它是否可以在一些更好的(阅读：更聪明的方式)完成.花费我一些时间来计算和准备所有的动画步骤(正在使用excell),我觉得很愚蠢.

第二个问题(基于其中一个意见)是否这个动画可以更流畅？如何完成？