CSS实现天气应用加载动画时嵌套淡入淡出切换效果失效问题求解

CSS不支持在@keyframes的关键帧规则内嵌套调用其他动画，你在changeEmojis的关键帧中声明animation: fadeInOut 1s会直接覆盖外层绑定的changeEmojis动画，因此两套动画都无法正常执行。

把背景图切换和淡入淡出逻辑整合到同一个@keyframes中即可实现需求，以下是适配10秒周期、10个图标轮播的完整代码：

/* 轮播容器基础样式，可根据自身需求调整宽高等参数 */
.weather-loading {
  width: 64px;
  height: 64px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  /* 绑定动画：10秒周期 无限循环 线性匀速 */
  animation: weatherIconCycle 10s infinite linear;
}

@keyframes weatherIconCycle {
  /* 1号图标：晴天 */
  0% {
    background-image: url("src/emojis/sun.png");
    opacity: 0;
  }
  5% { opacity: 1; }
  9% { opacity: 1; }
  10% { opacity: 0; }

  /* 2号图标：多云 */
  10% {
    background-image: url("src/emojis/cloud.png");
    opacity: 0;
  }
  15% { opacity: 1; }
  19% { opacity: 1; }
  20% { opacity: 0; }

  /* 3号图标：雨天 */
  20% {
    background-image: url("src/emojis/cloud-with-rain.png");
    opacity: 0;
  }
  25% { opacity: 1; }
  29% { opacity: 1; }
  30% { opacity: 0; }

  /* 4号图标：雷雨天 */
  30% {
    background-image: url("src/emojis/thunder-cloud-and-rain.png");
    opacity: 0;
  }
  35% { opacity: 1; }
  39% { opacity: 1; }
  40% { opacity: 0; }

  /* 5号图标：大风 */
  40% {
    background-image: url("src/emojis/wind.png");
    opacity: 0;
  }
  45% { opacity: 1; }
  49% { opacity: 1; }
  50% { opacity: 0; }

  /* 6号图标：雪天 */
  50% {
    background-image: url("src/emojis/cloud-with-snow.png");
    opacity: 0;
  }
  55% { opacity: 1; }
  59% { opacity: 1; }
  60% { opacity: 0; }

  /* 7号图标：彩虹 */
  60% {
    background-image: url("src/emojis/rainbow.png");
    opacity: 0;
  }
  65% { opacity: 1; }
  69% { opacity: 1; }
  70% { opacity: 0; }

  /* 8号图标：流星 */
  70% {
    background-image: url("src/emojis/comet.png");
    opacity: 0;
  }
  75% { opacity: 1; }
  79% { opacity: 1; }
  80% { opacity: 0; }

  /* 9号图标：满月 */
  80% {
    background-image: url("src/emojis/full-moon.png");
    opacity: 0;
  }
  85% { opacity: 1; }
  89% { opacity: 1; }
  90% { opacity: 0; }

  /* 回到晴天图标，完成循环 */
  90% {
    background-image: url("src/emojis/sun.png");
    opacity: 0;
  }
  95% { opacity: 1; }
  99% { opacity: 1; }
  100% { opacity: 0; }
}

• 每个图标占用总周期10%的时长（10秒周期对应1秒/张），其中前0.5秒淡入，中间0.4秒保持完全显示，最后0.1秒淡出衔接下一张，过渡流畅无断层
• 可根据需求调整各阶段百分比数值，即可自定义淡入淡出速度、图标停留时长
• 如果需要更灵活的控制（比如动态增减图标），可以搭配JS实现：将图标路径存入数组，配合CSS的transition: opacity 0.5s ease属性，用定时器控制透明度切换后更换背景图即可，维护成本更低。

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