Html CSS动画背景颜色问题

作为CSS动画的新手，我遇到了一个背景色无法解决的问题

因此，我希望在动画之前有一个延迟，然后从左到右填充背景，这是可行的，但问题是初始背景颜色延迟为#73A7CE，然后有一个闪烁到较浅颜色#9BD5FF

有没有办法将#9BD5FF作为初始颜色，而#73A7CE仅与动画一起出现，以创建加载类型效果

html{
框大小：边框框；
字体大小：62.5%；
-webkit溢出滚动：触摸；
}
*，*：之前，*：之后{框大小：继承；}
身体{
背景:"282828 ;；
颜色：#333；
字体系列：“开放式Sans”，无衬线；
字体大小：1.6rem；
线高：1.5；
保证金：0；
}
.content\u包装器{
显示器：flex；
证明内容：中心；
边缘顶部：4rem；
}
.promo__btn{
对齐项目：居中；
动画：btn bg动画5s；
动画延迟：4s；
动画计时功能：线性；
背景：线性梯度（向右，#73A7CE 50%，#9BD5FF 50%）；
背景大小：200%；
显示器：flex；
字号：2rem；
字号：600；
身高：6雷姆；
证明内容：中心；
左侧填充：1.8rem；
右侧填充：1.8rem；
宽度：37.4rem；
}
@关键帧btn bg动画{
从{
背景位置：右；
}
到{
背景位置：左；
}
}

按钮

使用两层而不是一层，并将动画应用于顶层的

背景大小

：

正文{
背景:"282828 ;；
颜色：#333；
}
.promo__btn{
动画：btn bg动画5s 4s线性转发；
背景：
线性梯度（#9BD5FF，#9BD5FF），
#73A7CE；
背景大小：0.100%；
背景重复：无重复；
显示器：flex；
字体大小：1.5rem；
字号：600；
身高：6雷姆；
证明内容：中心；
对齐项目：居中；
宽度：27.4rem；
保证金：20px自动；
}
@关键帧btn bg动画{
到{
背景大小：100%100%；
}
}

看着我渐渐消失。。。