Html 如何仅闪烁背景而不闪烁文本

我只需要闪烁背景色，而不是文本。我无法做到这一点。我需要你的帮助

。闪烁{
宽度：200px；
高度：50px；
背景色：洋红色；
填充：15px；
文本对齐：居中；
线高：50px；
}
.文本{
字体大小：25px；
字体系列：草书；
颜色：白色；
动画：闪烁1s线性无限；
}
@关键帧闪烁{
0%{不透明度：0；}
25%{不透明度：.5；}
50%{不透明度：1；}
75%{不透明度：.5；}
100%{不透明度：0；}
}

闪烁文本

，而不是此：

。闪烁{
宽度：200px；
高度：50px；
背景色：洋红色；
填充：15px；
文本对齐：居中；
线高：50px；
}
.文本{
字体大小：25px；
字体系列：草书；
颜色：白色；
动画：闪烁1s线性无限；
}
@关键帧闪烁{
0%{不透明度：0；}
25%{不透明度：.5；}
50%{不透明度：1；}
75%{不透明度：.5；}
100%{不透明度：0；}
}

闪烁文本

您实际上在

文本

类中添加了动画属性，而不是

闪烁

。把它移一下

此外，如果正在设置

不透明度的动画，则div中的内容也会褪色。考虑到您只希望设置背景动画，请改为设置背景颜色的动画


。闪烁{
宽度：200px；
高度：50px；
背景色：洋红色；
填充：15px；
文本对齐：居中；
线高：50px；
动画：闪烁1s线性无限；
}
.文本{
字体大小：25px；
字体系列：草书；
颜色：黑色；
}
@关键帧闪烁{
0%{背景色：洋红色；}
50%{背景色：白色；}
100%{背景色：洋红色；}
}

点灭文字
只需将动画添加到背景中即可container@Sfili_81：OP必须提及使bg闪烁且文本保持完整感谢D-Waqas的帮助，但我希望文本保持稳定。只有背景闪烁。让我知道如何结束这个问题。