我有彩色,动画,垂直线这样一个：
@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),我觉得很愚蠢.
第二个问题(基于其中一个意见)是否这个动画可以更流畅？如何完成？
解决方法
保持结构最大化,这里是我的解决方案
.colored {
margin-top: 5px;
margin-bottom: 5px;
height: 7px;
border-top: 0;
background: #c4e17f;
border-radius: 5px;
background-image: linear-gradient(to right,#62c2e4);
padding-right: 50%;
background-origin: content-Box;
background-size: 200%;
animation-name: colored;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: steps(8);
}
@keyframes colored {
from {background-position: 0% 0%;}
to {background-position: 200% 0%;}
}
<hr class="colored">
我用步骤功能来动画化背景位置,所以颜色的离散变化很容易实现.
使用一个单一的梯度,响应和动画有点棘手.
最简单的解决方案是什么,表示背景大小为100％,不受百分比的背景位置更改的影响.
诀窍是将背景设置为只有一半的元素(用填充技巧实现),然后将尺寸设置为200％
