我有这样的彩色,动画,垂直线:
@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, #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: -o-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: linear-gradient(to right, #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);
}
12.5% {
background-image: -webkit-linear-gradient(left, #62c2e4, #62c2e4 12.5%, #c4e17f 12.5%, #c4e17f 25%, #f7fdca 25%, #f7fdca 37.5%, #fecf71 37.5%, #fecf71 50%, #f0776c 50%, #f0776c 62.5%, #db9dbe 62.5%, #db9dbe 75%, #c49cde 75%, #c49cde 87.5%, #669ae1 87.5%, #669ae1);
background-image: -moz-linear-gradient(left, #62c2e4, #62c2e4 12.5%, #c4e17f 12.5%, #c4e17f 25%, #f7fdca 25%, #f7fdca 37.5%, #fecf71 37.5%, #fecf71 50%, #f0776c 50%, #f0776c 62.5%, #db9dbe 62.5%, #db9dbe 75%, #c49cde 75%, #c49cde 87.5%, #669ae1 87.5%, #669ae1);
background-image: -o-linear-gradient(left, #62c2e4, #62c2e4 12.5%, #c4e17f 12.5%, #c4e17f 25%, #f7fdca 25%, #f7fdca 37.5%, #fecf71 37.5%, #fecf71 50%, #f0776c 50%, #f0776c 62.5%, #db9dbe 62.5%, #db9dbe 75%, #c49cde 75%, #c49cde 87.5%, #669ae1 87.5%, #669ae1);
background-image: linear-gradient(to right, #62c2e4, #62c2e4 12.5%, #c4e17f 12.5%, #c4e17f 25%, #f7fdca 25%, #f7fdca 37.5%, #fecf71 37.5%, #fecf71 50%, #f0776c 50%, #f0776c 62.5%, #db9dbe 62.5%, #db9dbe 75%, #c49cde 75%, #c49cde 87.5%, #669ae1 87.5%, #669ae1);
}
25% {
background-image: -webkit-linear-gradient(left, #669ae1, #669ae1 12.5%, #62c2e4 12.5%, #62c2e4 25%, #c4e17f 25%, #c4e17f 37.5%, #f7fdca 37.5%, #f7fdca 50%, #fecf71 50%, #fecf71 62.5%, #f0776c 62.5%, #f0776c 75%, #db9dbe 75%, #db9dbe 87.5%, #c49cde 87.5%, #c49cde);
background-image: -moz-linear-gradient(left, #669ae1, #669ae1 12.5%, #62c2e4 12.5%, #62c2e4 25%, #c4e17f 25%, #c4e17f 37.5%, #f7fdca 37.5%, #f7fdca 50%, #fecf71 50%, #fecf71 62.5%, #f0776c 62.5%, #f0776c 75%, #db9dbe 75%, #db9dbe 87.5%, #c49cde 87.5%, #c49cde);
background-image: -o-linear-gradient(left, #669ae1, #669ae1 12.5%, #62c2e4 12.5%, #62c2e4 25%, #c4e17f 25%, #c4e17f 37.5%, #f7fdca 37.5%, #f7fdca 50%, #fecf71 50%, #fecf71 62.5%, #f0776c 62.5%, #f0776c 75%, #db9dbe 75%, #db9dbe 87.5%, #c49cde 87.5%, #c49cde);
background-image: linear-gradient(to right, #669ae1, #669ae1 12.5%, #62c2e4 12.5%, #62c2e4 25%, #c4e17f 25%, #c4e17f 37.5%, #f7fdca 37.5%, #f7fdca 50%, #fecf71 50%, #fecf71 62.5%, #f0776c 62.5%, #f0776c 75%, #db9dbe 75%, #db9dbe 87.5%, #c49cde 87.5%, #c49cde);
}
37.5% {
background-image: -webkit-linear-gradient(left, #c49cde, #c49cde 12.5%, #669ae1 12.5%, #669ae1 25%, #62c2e4 25%, #62c2e4 37.5%, #c4e17f 37.5%, #c4e17f 50%, #f7fdca 50%, #f7fdca 62.5%, #fecf71 62.5%, #fecf71 75%, #f0776c 75%, #f0776c 87.5%, #db9dbe 87.5%, #db9dbe);
background-image: -moz-linear-gradient(left, #c49cde, #c49cde 12.5%, #669ae1 12.5%, #669ae1 25%, #62c2e4 25%, #62c2e4 37.5%, #c4e17f 37.5%, #c4e17f 50%, #f7fdca 50%, #f7fdca 62.5%, #fecf71 62.5%, #fecf71 75%, #f0776c 75%, #f0776c 87.5%, #db9dbe 87.5%, #db9dbe);
background-image: -o-linear-gradient(left, #c49cde, #c49cde 12.5%, #669ae1 12.5%, #669ae1 25%, #62c2e4 25%, #62c2e4 37.5%, #c4e17f 37.5%, #c4e17f 50%, #f7fdca 50%, #f7fdca 62.5%, #fecf71 62.5%, #fecf71 75%, #f0776c 75%, #f0776c 87.5%, #db9dbe 87.5%, #db9dbe);
background-image: linear-gradient(to right, #c49cde, #c49cde 12.5%, #669ae1 12.5%, #669ae1 25%, #62c2e4 25%, #62c2e4 37.5%, #c4e17f 37.5%, #c4e17f 50%, #f7fdca 50%, #f7fdca 62.5%, #fecf71 62.5%, #fecf71 75%, #f0776c 75%, #f0776c 87.5%, #db9dbe 87.5%, #db9dbe);
}
50% {
background-image: -webkit-linear-gradient(left, #db9dbe, #db9dbe 12.5%, #c49cde 12.5%, #c49cde 25%, #669ae1 25%, #669ae1 37.5%, #62c2e4 37.5%, #62c2e4 50%, #c4e17f 50%, #c4e17f 62.5%, #f7fdca 62.5%, #f7fdca 75%, #fecf71 75%, #fecf71 87.5%, #f0776c 87.5%, #f0776c);
background-image: -moz-linear-gradient(left, #db9dbe, #db9dbe 12.5%, #c49cde 12.5%, #c49cde 25%, #669ae1 25%, #669ae1 37.5%, #62c2e4 37.5%, #62c2e4 50%, #c4e17f 50%, #c4e17f 62.5%, #f7fdca 62.5%, #f7fdca 75%, #fecf71 75%, #fecf71 87.5%, #f0776c 87.5%, #f0776c);
background-image: -o-linear-gradient(left, #db9dbe, #db9dbe 12.5%, #c49cde 12.5%, #c49cde 25%, #669ae1 25%, #669ae1 37.5%, #62c2e4 37.5%, #62c2e4 50%, #c4e17f 50%, #c4e17f 62.5%, #f7fdca 62.5%, #f7fdca 75%, #fecf71 75%, #fecf71 87.5%, #f0776c 87.5%, #f0776c);
background-image: linear-gradient(to right, #db9dbe, #db9dbe 12.5%, #c49cde 12.5%, #c49cde 25%, #669ae1 25%, #669ae1 37.5%, #62c2e4 37.5%, #62c2e4 50%, #c4e17f 50%, #c4e17f 62.5%, #f7fdca 62.5%, #f7fdca 75%, #fecf71 75%, #fecf71 87.5%, #f0776c 87.5%, #f0776c);
}
62.5% {
background-image: -webkit-linear-gradient(left, #f0776c, #f0776c 12.5%, #db9dbe 12.5%, #db9dbe 25%, #c49cde 25%, #c49cde 37.5%, #669ae1 37.5%, #669ae1 50%, #62c2e4 50%, #62c2e4 62.5%, #c4e17f 62.5%, #c4e17f 75%, #f7fdca 75%, #f7fdca 87.5%, #fecf71 87.5%, #fecf71);
background-image: -moz-linear-gradient(left, #f0776c, #f0776c 12.5%, #db9dbe 12.5%, #db9dbe 25%, #c49cde 25%, #c49cde 37.5%, #669ae1 37.5%, #669ae1 50%, #62c2e4 50%, #62c2e4 62.5%, #c4e17f 62.5%, #c4e17f 75%, #f7fdca 75%, #f7fdca 87.5%, #fecf71 87.5%, #fecf71);
background-image: -o-linear-gradient(left, #f0776c, #f0776c 12.5%, #db9dbe 12.5%, #db9dbe 25%, #c49cde 25%, #c49cde 37.5%, #669ae1 37.5%, #669ae1 50%, #62c2e4 50%, #62c2e4 62.5%, #c4e17f 62.5%, #c4e17f 75%, #f7fdca 75%, #f7fdca 87.5%, #fecf71 87.5%, #fecf71);
background-image: linear-gradient(to right, #f0776c, #f0776c 12.5%, #db9dbe 12.5%, #db9dbe 25%, #c49cde 25%, #c49cde 37.5%, #669ae1 37.5%, #669ae1 50%, #62c2e4 50%, #62c2e4 62.5%, #c4e17f 62.5%, #c4e17f 75%, #f7fdca 75%, #f7fdca 87.5%, #fecf71 87.5%, #fecf71);
}
75% {
background-image: -webkit-linear-gradient(left, #fecf71, #fecf71 12.5%, #f0776c 12.5%, #f0776c 25%, #db9dbe 25%, #db9dbe 37.5%, #c49cde 37.5%, #c49cde 50%, #669ae1 50%, #669ae1 62.5%, #62c2e4 62.5%, #62c2e4 75%, #c4e17f 75%, #c4e17f 87.5%, #f7fdca 87.5%, #f7fdca);
background-image: -moz-linear-gradient(left, #fecf71, #fecf71 12.5%, #f0776c 12.5%, #f0776c 25%, #db9dbe 25%, #db9dbe 37.5%, #c49cde 37.5%, #c49cde 50%, #669ae1 50%, #669ae1 62.5%, #62c2e4 62.5%, #62c2e4 75%, #c4e17f 75%, #c4e17f 87.5%, #f7fdca 87.5%, #f7fdca);
background-image: -o-linear-gradient(left, #fecf71, #fecf71 12.5%, #f0776c 12.5%, #f0776c 25%, #db9dbe 25%, #db9dbe 37.5%, #c49cde 37.5%, #c49cde 50%, #669ae1 50%, #669ae1 62.5%, #62c2e4 62.5%, #62c2e4 75%, #c4e17f 75%, #c4e17f 87.5%, #f7fdca 87.5%, #f7fdca);
background-image: linear-gradient(to right, #fecf71, #fecf71 12.5%, #f0776c 12.5%, #f0776c 25%, #db9dbe 25%, #db9dbe 37.5%, #c49cde 37.5%, #c49cde 50%, #669ae1 50%, #669ae1 62.5%, #62c2e4 62.5%, #62c2e4 75%, #c4e17f 75%, #c4e17f 87.5%, #f7fdca 87.5%, #f7fdca);
}
87.5% {
background-image: -webkit-linear-gradient(left, #f7fdca, #f7fdca 12.5%, #fecf71 12.5%, #fecf71 25%, #f0776c 25%, #f0776c 37.5%, #db9dbe 37.5%, #db9dbe 50%, #c49cde 50%, #c49cde 62.5%, #669ae1 62.5%, #669ae1 75%, #62c2e4 75%, #62c2e4 87.5%, #c4e17f 87.5%, #c4e17f);
background-image: -moz-linear-gradient(left, #f7fdca, #f7fdca 12.5%, #fecf71 12.5%, #fecf71 25%, #f0776c 25%, #f0776c 37.5%, #db9dbe 37.5%, #db9dbe 50%, #c49cde 50%, #c49cde 62.5%, #669ae1 62.5%, #669ae1 75%, #62c2e4 75%, #62c2e4 87.5%, #c4e17f 87.5%, #c4e17f);
background-image: -o-linear-gradient(left, #f7fdca, #f7fdca 12.5%, #fecf71 12.5%, #fecf71 25%, #f0776c 25%, #f0776c 37.5%, #db9dbe 37.5%, #db9dbe 50%, #c49cde 50%, #c49cde 62.5%, #669ae1 62.5%, #669ae1 75%, #62c2e4 75%, #62c2e4 87.5%, #c4e17f 87.5%, #c4e17f);
background-image: linear-gradient(to right, #f7fdca, #f7fdca 12.5%, #fecf71 12.5%, #fecf71 25%, #f0776c 25%, #f0776c 37.5%, #db9dbe 37.5%, #db9dbe 50%, #c49cde 50%, #c49cde 62.5%, #669ae1 62.5%, #669ae1 75%, #62c2e4 75%, #62c2e4 87.5%, #c4e17f 87.5%, #c4e17f);
}
100% {
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, #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: -o-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: linear-gradient(to right, #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);
}
}
.colored {
margin-top: 5px;
margin-bottom: 5px;
height: 7px;
border-top: 0;
background: #c4e17f;
border-radius: 5px;
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, #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: -o-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: linear-gradient(to right, #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);
animation-name: colored;
animation-duration: 2s;
animation-iteration-count: infinite;
}
我想知道它是否可以更好地完成(阅读:更聪明的方式).我花了一些时间来计算和准备所有动画步骤(使用excell),我觉得很愚蠢.
第二个问题(基于其中一个评论)是否这个动画可以更顺畅?怎么做到了?