您应该删除、移动或合并它们。

.round-time-bar[data-style="smooth"] div {
    animation: roundtime calc(var(--duration) * 1s) linear forwards;
}
.round-time-bar div {
  animation: colorChange 1s infinite;
}

第一个CSS规则将名为“roundtime”的动画应用于类为.round-time-bar且data-style属性的值为“smooth”的元素内的所有div元素。第二个CSS规则将名为“colorChange”的动画应用于类为.round-time-bar的元素内的所有div元素。但是，第一个规则优先于第二个规则。因此，第一个规则中指定的动画将应用于满足第一个规则中指定的条件的所有div元素，而不管它们是否也满足第二个规则中指定的条件。

正如阿迪L提到，你不能合并2动画一次例如：-

@keyframes move {
    0%, 100% { transform: translateX(0px); }
    50% { transform: translateX(50px); }
}
@keyframes skew {
    0%, 100% { transform: skewX(0deg); }
    50% { transform: skewX(15deg); }
}
@keyframes opacity {
    0%, 100% { opacity: 1; }
    50% { opacity: .25; }
}

你必须为它们的每个关键帧制作3个div

.div_class
{
    animation:animate1 1000ms linear infinite;
}

.element
{     
   animation:animate2 3000ms linear infinite;
}

Src is the accepted answer
因此，只需更改选择器名称即可解决问题
here is a fork working perfectly with perfect timing.
编辑第87行

.round-time-bar[data-style="smooth"] div.wrapper {
  animation: roundtime calc(var(--duration) * 1s) linear forwards;
}

到

.round-time-bar[data-style="smooth"] {
  animation: roundtime calc(var(--duration) * 1s) linear forwards;
}

这修复了问题

你需要到 Package 这条，并且缩放这 Package .为这颜色变化你能应用在. bar

.bar{
width:100%;
height:100%;
animation: anim 1s infinite;
transform-origin:center;
}

@keyframes anim{
0%{
background-color:red
}
50%{
background-color:green
}
100%{
background-color:yellow
}
}
.wrapper{
width:100%;
height:4px;
animation: scale 1s infinite;
}
@keyframes scale{
to{
transform:scaleX(0);
}
}

<div class="wrapper">
<div class="bar"></div>
</div>