html 单元格颜色渐变色,html – CSS水平线动画(渐变颜色)

我有彩色,动画,垂直线这样一个：

@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;

}

---

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

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