如何实现CSS闪烁动画播放-停止-定时重复的效果？

要实现“闪烁动画播放后停顿一段时间再重复”的效果，核心是把闪烁过程+停顿过程合并成一个完整的动画周期，再设置无限循环。具体修改如下：

.neon span {
  /* 总周期 = 原闪烁总时长(900ms×2) + 停顿时长(3s) = 4800ms（可自行调整停顿时长） */
  animation: flicker 4.8s linear infinite;
}
.neon .delay1 {
  animation-delay: 1.4s;
}
.neon .delay2 {
  animation-delay: 2.0s;
}

@keyframes flicker {
  /* 闪烁阶段：按原动画节奏，映射到总周期的前37.5%（1.8s/4.8s） */
  0% { opacity: 0; }
  2.08% { opacity: 1; }
  4.17% { opacity: 0; }
  8.33% { opacity: 1; }
  10.42% { opacity: 0; }
  12.5% { opacity: 1; }
  16.67% { opacity: 0; }
  37.5% { opacity: 1; }
  
  /* 停顿阶段：从37.5%到100%保持最后状态，持续3s */
  100% { opacity: 1; }
}

调整说明 #

1. 总周期计算：你原动画是900ms播放2次，即1.8s完成一轮闪烁。假设需要停顿3秒，总周期设为1.8s + 3s = 4.8s，可根据需求修改停顿时长。
2. 关键帧映射：把原闪烁动画的每个关键帧百分比，按原百分比 × (闪烁时长/总周期)换算成新百分比，确保闪烁节奏不变。
3. 停顿实现：在闪烁完成的关键帧（37.5%）到100%之间，保持opacity:1，这段时间就是停顿的间隔。

如果需要修改停顿时间，只需调整总周期中的停顿时长，再重新计算关键帧百分比即可。

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