嘿，我完全懂你想要的效果！你之前尝试用CSS做单张图片闪烁，但两张的时序总是同步，没法错开对吧？其实只需要利用CSS的animation-delay属性，就能轻松让第二张图片的动画和第一张完美偏移，实现交替闪烁的效果。

问题分析 #

你原来的动画只定义了单张图片的闪烁逻辑，但两张图片用同一个动画时会同步变化，自然没法达到交替的效果。核心解决思路就是让第二张动画的开始时间比第一张晚半个动画周期，这样当第一张隐藏时第二张显示，反之亦然。

修改后的CSS方案 #

我调整了动画关键帧，让闪烁效果是瞬间切换（如果想要渐变闪烁可以保留你原来的关键帧，但交替效果用瞬间切换会更直观），然后给第二张图片添加动画延迟：

/* 定义闪烁动画：前半段完全显示，后半段完全隐藏 */
@keyframes blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* 兼容webkit内核浏览器 */
@-webkit-keyframes blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* 第一张图片：直接应用1秒周期的无限闪烁动画 */
.image-1 {
  -webkit-animation: blink 1s infinite;
  animation: blink 1s infinite;
}

/* 第二张图片：用同样的动画，但延迟0.5秒启动，刚好和第一张时序错开 */
.image-2 {
  -webkit-animation: blink 1s infinite;
  animation: blink 1s infinite;
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s;
}

对应HTML结构 #

把两张图片分别绑定上面的类即可：

<img src="你的图片1地址" alt="图片1" class="image-1">
<img src="你的图片2地址" alt="图片2" class="image-2">

原理说明 #

• 动画周期设为1秒，前0.5秒图片完全显示，后0.5秒完全隐藏；
• animation-delay: 0.5s让第二张图片的动画晚启动0.5秒，刚好和第一张的状态完全相反：当第一张进入隐藏阶段时，第二张刚好开始显示，以此循环就实现了完美的交替闪烁。

如果想要调整闪烁速度，只需要修改animation-duration的值，同时把animation-delay设为时长的一半就行（比如时长2秒，延迟就设为1秒）。

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