如何实现精灵的指定时序淡入淡出循环动画？

方案1：适配1秒完整周期 #

如果要求动画每1秒完整重复一次，需将各阶段时间按比例压缩到1秒内，CSS代码如下：

.sprite {
  /* 替换为你的精灵元素尺寸和背景图 */
  width: 120px;
  height: 120px;
  background: url('your-sprite-image.png') center/cover no-repeat;
  /* 动画配置：1秒时长、无限循环、匀速 */
  animation: sprite-opacity-cycle 1s infinite linear;
}

@keyframes sprite-opacity-cycle {
  /* 初始状态：完全透明 */
  0% {
    opacity: 0;
  }
  /* 前0.5秒：从0淡入到50%不透明度 */
  49.99% {
    opacity: 0.5;
  }
  /* 0.5秒节点：瞬间切换至100%不透明度 */
  50% {
    opacity: 1;
  }
  /* 0.5-0.7秒：保持100%不透明度（持续0.2秒） */
  70% {
    opacity: 1;
  }
  /* 0.7-1秒：从100%淡出至完全透明（持续0.3秒） */
  100% {
    opacity: 0;
  }
}

关键帧说明：

• 用49.99%而非50%作为淡入终点，避免和后续的瞬间跳转关键帧产生过渡效果，确保“瞬间切换”的表现。
• 各阶段时间占比严格对应1秒周期：淡入占50%时长、等待占20%时长、淡出占30%时长。

方案2：严格遵循各阶段时长（淡入1s/等待0.2s/淡出0.5s） #

如果需要严格按照你描述的各阶段时长执行，同时保证每1秒重复一次（动画未结束就启动下一轮），可通过负延迟实现：

.sprite {
  width: 120px;
  height: 120px;
  background: url('your-sprite-image.png') center/cover no-repeat;
  /* 总动画时长为1.7秒，负延迟让动画提前0.7秒启动，实现1秒重复间隔 */
  animation: sprite-opacity-cycle 1.7s infinite linear;
  animation-delay: -0.7s;
}

@keyframes sprite-opacity-cycle {
  0% {
    opacity: 0;
  }
  /* 1秒占总时长1.7秒的58.82%，淡入到50% */
  58.82% {
    opacity: 0.5;
  }
  /* 瞬间跳转到100% */
  58.83% {
    opacity: 1;
  }
  /* 等待0.2秒后，总时长占比为(1+0.2)/1.7≈70.59% */
  70.59% {
    opacity: 1;
  }
  /* 最后0.5秒淡出到0 */
  100% {
    opacity: 0;
  }
}

逻辑说明：

• 总动画时长为1+0.2+0.5=1.7秒，通过animation-delay: -0.7s让动画从第0.7秒的位置开始播放，这样每经过1秒，动画就会回到起始触发点，实现“每1秒重复一次”的要求。

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