CSS实现红色闪烁圆形动画先变黑再隐藏问题解决

你遇到的黑帧异常本质是动画配置错误导致的硬切跳帧：

• 当前blink动画默认是单向播放，每轮动画只会执行「从透明（opacity:0）到完全不透明（opacity:1）」的淡入过程，到达100%进度后会瞬间重置回初始的透明状态，不存在平滑淡出的过渡
• 这个瞬间跳变的过程中，浏览器渲染高对比的红色圆形、蓝色背景时会生成错误的混合色帧，视觉上就是先闪一下黑色再消失的异常效果。

只需要给动画配置加alternate属性，让动画正向播完淡入后，反向播放淡出过程，实现完整的明暗平滑循环即可。如果还有偶发的渲染异常，可以加一行will-change: opacity触发GPU加速渲染，彻底规避色值混合错误。

修复后的完整CSS代码如下：

body {
  background: blue;
}
.blinker {
  width: 10px;
  height: 10px;
  background-color: red;
  position: absolute;
  border-radius: 50%;
  top: 5px;
  right: 10px;
  /* 新增alternate让动画正反交替，实现淡入+淡出的平滑循环 */
  animation: blink 1s ease infinite alternate;
  /* 可选：针对opacity变化开启硬件加速，避免渲染跳帧 */
  will-change: opacity;
}

@keyframes blink {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

原有HTML代码不需要修改，直接用即可。

如果你不想修改动画简写属性，也可以直接调整关键帧规则，把单轮动画拆成淡入+淡出两个阶段，效果完全一致，这种写法不需要加alternate参数：

@keyframes blink {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}

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