我有一个正在耗尽的条形图,我想设置它的动画效果,但是我想随着时间的推移改变条形图的颜色。
我试着这么做:
@keyframes colorChange {
0% { background-color: green; }
50% { background-color: yellow; }
100% { background-color: red; }
}
但它不工作。我该怎么解决这个问题?https://codepen.io/gamerm83/pen/XWBKYyQ
我有一个正在耗尽的条形图,我想设置它的动画效果,但是我想随着时间的推移改变条形图的颜色。
我试着这么做:
@keyframes colorChange {
0% { background-color: green; }
50% { background-color: yellow; }
100% { background-color: red; }
}
但它不工作。我该怎么解决这个问题?https://codepen.io/gamerm83/pen/XWBKYyQ
3条答案
按热度按时间relj7zay1#
您应该删除、移动或合并它们。
第一个CSS规则将名为“roundtime”的动画应用于类为.round-time-bar且data-style属性的值为“smooth”的元素内的所有div元素。第二个CSS规则将名为“colorChange”的动画应用于类为.round-time-bar的元素内的所有div元素。但是,第一个规则优先于第二个规则。因此,第一个规则中指定的动画将应用于满足第一个规则中指定的条件的所有div元素,而不管它们是否也满足第二个规则中指定的条件。
ni65a41a2#
正如阿迪L提到,你不能合并2动画一次例如:-
你必须为它们的每个关键帧制作3个div
Src is the accepted answer
因此,只需更改选择器名称即可解决问题
here is a fork working perfectly with perfect timing.
编辑第87行
到
这修复了问题
jexiocij3#
你需要到 Package 这条,并且缩放这 Package .为这颜色变化你能应用在. bar