Html CSS3动画文本颜色变化

我是CSS3新手，正在努力学习，但也可以将其应用到我正在从事的项目中。我想我离这里不远了，但这只是我被困的最后一点

我想要实现的是，这些字母换成另一种颜色，然后再回到原来的颜色，但它会一个接一个地循环字母

i、 字母A变成深蓝色=>浅蓝色=>深蓝色 字母B为浅蓝色=>深蓝色=>浅蓝色

这是我到目前为止得到的代码

正文
{
边际：0px；
填充：0px；
背景：#FFFFFF；
}
保险商实验室
{
位置：绝对位置；
最高：50%；
左：50%
转换：翻译（-50%，-50%）；
保证金：0；
填充：0；
显示器：flex；
}
ulli
{
列表样式：无；
字号：5em；
字母间距：15px；
}
ul li.A
{
颜色：#3D57A7；
动画：aniA 1.4s线性无限；
}
ul li.B
{
颜色：#95D1D7；
动画：Anib3s线性无限；
动画延迟：1.6s；
}
@关键帧
{
0%, 90%
{
颜色：#3D57A7；
}
100%
{
颜色：#95D1D7；
}
}
@关键帧aniB
{
0%, 90%
{
颜色：#95D1D7；
}
100%
{
颜色：#3D57A7；
}
}
ul-li:n个孩子（1），ul-li:n个孩子（10）
{
动画延迟：.2s；
}
ul-li:n个孩子（2），ul-li:n个孩子（11）
{
动画延迟：.4s；
}
ul-li:n个孩子（3），ul-li:n个孩子（12）
{
动画延迟：.6s；
}
ul-li:n个孩子（4），ul-li:n个孩子（13）
{
动画延迟：.8s；
}
ul-li:n个孩子（5），ul-li:n个孩子（14）
{
动画延迟：1s；
}
ul-li:n个孩子（6），ul-li:n个孩子（15）
{
动画延迟：1.2s；
}
第n个孩子（7）
{
动画延迟：1.4s；
}
第n个孩子（8）
{
动画延迟：1.6s；
}
第n个孩子（9）
{
动画延迟：3s；
}

A
A
A
A
A
A
A
A

B
B
B
B
B
B

我设法解决了我的问题这就是我如何做到的

正文
{
边际：0px；
填充：0px；
背景：#FFFFFF；
}
保险商实验室
{
位置：绝对位置；
最高：50%；
左：50%
转换：翻译（-50%，-50%）；
保证金：0；
填充：0；
显示器：flex；
}
ulli
{
列表样式：无；
字号：5em；
字母间距：15px；
}
ul li.A
{
颜色：#3D57A7；
动画：aniA 2.8s线性无限；
}
ul li.B
{
颜色：#95D1D7；
动画：Anib2.8s线性无限；
}
@关键帧
{
0%, 90%
{
颜色：#3D57A7；
}
100%
{
颜色：#95D1D7；
}
}
@关键帧aniB
{
0%, 90%
{
颜色：#95D1D7；
}
100%
{
颜色：#3D57A7；
}
}
第n个孩子（1）
{
动画延迟：.2s；
}
第n个孩子（2）
{
动画延迟：.4s；
}
第n个孩子（3）
{
动画延迟：.6s；
}
第n个孩子（4）
{
动画延迟：.8s；
}
第n个孩子（5）
{
动画延迟：1s；
}
第n个孩子（6）
{
动画延迟：1.2s；
}
第n个孩子（7）
{
动画延迟：1.4s；
}
第n个孩子（8）
{
动画延迟：1.6s；
}
第n个孩子（9）
{
动画延迟：2.8秒；
}
第n个孩子（10）
{
动画延迟：1.8s；
}
第n个孩子（11）
{
动画延迟：2s；
}
第n个孩子（12）
{
动画延迟：2.2s；
}
第n名儿童（13）
{
动画延迟：2.4s；
}
第n个孩子（14）
{
动画延迟：2.6s；
}
第n个孩子（15岁）
{
动画延迟：2.8秒；
}

A
A
A
A
A
A
A
A

B
B
B
B
B
B

这里是另一种方法，您可以这样做并保存（一些规则：）

html，正文{
保证金：0；
}
保险商实验室{
位置：相对位置；
保证金：0；
填充：0；
显示：内联flex；
}
ul：之后，
ulli{
列表样式：无；
字号：4em；
宽度：50px；
文本对齐：居中；
}
ul li.A{
颜色：#3D57A7；
}
ul li.B{
颜色：#95D1D7；
}
ul:之后{
内容：''；
位置：绝对位置；
左：0；
排名：0；
身高：100%；
宽度：50px；
动画：ani 4s步骤（10，结束）无限；
}
@关键帧ani{
0%{左：0；内容：'A'；颜色：#95D1D7；}
49.9999%{内容：'A'；颜色：#95D1D7；}
50%{颜色：#95D1D7；}
50.0001%{内容：'B'；颜色：#3D57A7；}
60%{内容：'B'；颜色：#3D57A7；}
100%{左：100%；内容：'B'；颜色：#3D57A7；}
}

A
A
A
A
A
B
B
B
B
B