Html 更改关键帧动画CSS中div的内容

我有以下代码

#mf装载机容器{
位置：绝对位置；
排名：0；
底部：0；
左：0；
右：0；
保证金：自动；
宽度：500px；
高度：30px；
}
.mf装载机循环{
位置：绝对位置；
高度：30px；
宽度：30px；
边界半径：50%；
边框：2个实心#03C9A9；
顶部：-15px；
背景：白色；
文本对齐：居中；
线高：30px；
颜色：#03C9A9；
}
.mf加载程序文本{
位置：绝对位置；
宽度：150px；
顶部：20px；
}
#一个文本{
左：-10px；
-webkit动画：cl3s；
}
#两个文本{
左：200px；
-webkit动画：cl3s；
-webkit动画延迟：2s；
-webkit动画填充模式：正向；
颜色：rgba（1,1,1,0）；
}
#三个文本{
左：480px；
-webkit动画：cl3s；
-webkit动画延迟：3s；
-webkit动画填充模式：正向；
颜色：rgba（1,1,1,0）；
}
@-webkit关键帧cl{
从{
颜色：rgba（1,1,1,0）；
}
到{
颜色：rgba（1,1,1,1）；
}
}
#两个{
左：240px；
}
#三{
左：490px；
}
#mf加载器{
宽度：100%；
高度：3倍；
背景#03C9A9；
位置：绝对位置；
-webkit动画：mymove 5s；
/*铬、狩猎、歌剧*/
动画：mymove 5s；
边界半径：3px；
}
/*铬、狩猎、歌剧*/
@-webkit关键帧mymove{
0% {
宽度：0px；
}
50% {
宽度：50%；
}
100% {
宽度：100%；
}
}
/*标准语法*/
@关键帧mymove{
0% {
宽度：0px；
}
50% {
宽度：50%；
}
100% {
宽度：100%；
}
}

1.
2.
3.
每一天都会比过去好。

尤其是这个
订阅。。谢谢你的订阅。我们很感激！
完成

将内容（1、2、3个数字）更改为

：在

伪元素之后，并在那里设置内容。然后，将其应用于每个圆。通过此操作，您可以通过更改

内容：“”将它们包含到动画中
把“支票”改成你需要的任何东西


.mf加载器循环：之后{
位置：绝对位置；
宽度：100%；
身高：100%；
左：50%；
最高：50%；
转换：翻译（-50%，-50%）；
}
#一：之后{
内容：“1”；
-webkit动画：检查1 3s；
-webkit动画填充模式：正向；
}
#二：之后{
内容：“2”；
-webkit动画：选中2个3s；
-webkit动画延迟：2s；
-webkit动画填充模式：正向；
}
#三：之后{
内容：“3”；
-webkit动画：检查3s；
-webkit动画延迟：3s；
-webkit动画填充模式：正向；
}
@-webkit关键帧检查1{
从{
内容：“1”；
}
到{
内容：“检查”；
}
}
@-webkit关键帧检查2{
从{
内容：“2”；
}
到{
内容：“检查”；
}
}
@-webkit关键帧检查3{
从{
内容：“3”；
}
到{
内容：“检查”；
}
}
#mf装载机集装箱{
位置：绝对位置；
排名：0；
底部：0；
左：0；
右：0；
保证金：自动；
宽度：500px；
高度：30px；
}
.mf装载机循环{
位置：绝对位置；
高度：30px；
宽度：30px；
边界半径：50%；
边框：2个实心#03C9A9；
顶部：-15px；
背景：白色；
文本对齐：居中；
线高：30px；
颜色：#03C9A9；
}
.mf加载程序文本{
位置：绝对位置；
宽度：150px；
顶部：20px；
}
#一个文本{
左：-10px；
-webkit动画：cl3s；
}
#两个文本{
左：200px；
-webkit动画：cl3s；
-webkit动画延迟：2s；
-webkit动画填充模式：正向；
颜色：rgba（1,1,1,0）；
}
#三个文本{
左：480px；
-webkit动画：cl3s；
-webkit动画延迟：3s；
-webkit动画填充模式：正向；
颜色：rgba（1,1,1,0）；
}
@-webkit关键帧cl{
从{
颜色：rgba（1,1,1,0）；
}
到{
颜色：rgba（1,1,1,1）；
}
}
#两个{
左：240px；
}
#三{
左：490px；
}
#mf加载器{
宽度：100%；
高度：3倍；
背景#03C9A9；
位置：绝对位置；
-webkit动画：mymove 5s；
/*铬、狩猎、歌剧*/
动画：mymove 5s；
边界半径：3px；
}
/*铬、狩猎、歌剧*/
@-webkit关键帧mymove{
0% {
宽度：0px；
}
50% {
宽度：50%；
}
100% {
宽度：100%；
}
}
/*标准语法*/
@关键帧mymove{
0% {
宽度：0px；
}
50% {
宽度：50%；
}
100% {
宽度：100%；
}
}

每一天都会比过去好。

尤其是这个
订阅。。谢谢你的订阅。我们很感激！
完成
您可以使用
：before
使用
内容分配每个数字：“数字”。然后，通过在
50%
处将颜色更改为白色，然后为其指定选中标记值，可以在关键帧中平滑设置选中过渡的动画

对于此解决方案，您只需要定义1个关键帧动画

CSS更改


使用
content
显示您的数字，而不是在html内部
设置关键帧动画、延迟（第一个除外）和填充模式

.mf-loader-circle#two:before {
  content: '2';
  animation: changeLetter 2s;
  animation-delay: 1.5s;
  animation-fill-mode: forwards;
}


将颜色更改为白色，然后将其指定为选中标记

@keyframes changeLetter {
  50% {
    color: white;
  }
  100% {
    content: "\2713";
  }
}




#mf装载机容器{
位置：绝对位置；
排名：0；
底部：0；
左：0；
右：0；
保证金：自动；
宽度：500px；
高度：30px；
}
.mf装载机循环{
位置：绝对位置；
高度：30px；
宽度：30px；
边界半径：50%；
边框：2个实心#03C9A9；
顶部：-15px；
背景：白色；
文本对齐：居中；
线高：30px；
颜色：#03C9A9；
}
.mf加载器循环#一：之前{
内容：“1”；
-webkit动画：changeLetter 2s；
/*铬、狩猎、歌剧*/
动画：changeLetter 2s；
-webkit动画填充模式：正向；
动画填充模式：正向；
}
.mf加载器循环#二：之前{
内容：“2”；
-webkit动画：changeLetter 2s；
/*铬、狩猎、歌剧*/
动画：changeLetter 2s；
-webkit动画延迟：1.5s；
动画延迟：1.5s；
-网络工具包