PC端浏览器文本未按预期闪烁的问题排查求助

你当前的CSS代码只声明了动画调用规则，但未定义@keyframes blink-animation的具体动画行为——这是PC端主流浏览器（Chrome、Firefox、Edge、Opera）不生效的核心原因：移动端浏览器对缺失关键帧有一定容错，但PC端浏览器严格遵循CSS动画规范，必须显式定义动画关键帧才能执行。

修复后的完整CSS代码 #

.blink {
    animation: blink-animation 1s steps(3, start) infinite;
    -webkit-animation: blink-animation 1s steps(3, start) infinite;
    color: red;
}

/* 定义动画关键帧，实现闪烁逻辑 */
@keyframes blink-animation {
    to {
        visibility: hidden;
    }
}

/* 兼容webkit内核浏览器 */
@-webkit-keyframes blink-animation {
    to {
        visibility: hidden;
    }
}

说明 #

• steps(3, start)配合visibility: hidden的关键帧，会让元素在1秒周期内快速切换可见/隐藏状态，实现预期的闪烁效果
• 保留-webkit-前缀，确保Chrome、Edge、Opera等webkit内核浏览器的兼容性
• 替换原有CSS后，PC端所有主流浏览器和移动端的闪烁表现会保持一致

内容的提问来源于stack exchange，提问作者user22105603