CSS keyframe动画在swipe.js轮播浮动元素中失效求助

• 动画规则解析失败：原代码中动画时长参数1.5遗漏了时间单位s，浏览器无法识别该动画配置，会直接丢弃整个animation属性，导致淡入淡出动画完全不生效
• 叠放位置错位：#img7-2设置为绝对定位后，未指定top: 0; left: 0;偏移值，浏览器会将其放置在原文档流位置（紧跟#img7-1之后），无法与下层图片完全重合，最终出现图片偏移、看不到叠放效果的问题
• opacity取值不规范：关键帧中使用0%/100%作为opacity值，部分场景下会触发解析异常，应替换为CSS规范要求的0-1区间数值
• 冗余样式优化：#img7-1不需要额外设置position: relative与z-index: 1，保持默认文档流状态作为底层参考即可，多余的定位设置反而可能引发布局干扰

修正后的样式代码 #

.swipe {
  overflow: hidden;
  visibility: hidden;
  position: relative;
}
.swipe-wrap {
  overflow: hidden;
  position: relative;
}
.swipe-wrap > div {
  float: left;
  width: 100%;
  position: relative;
}

.swipe-wrap > div img {
  display: block;
  width: 100vw;
  height: 100vh;
  object-fit: contain;
}

#img7-2{
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  /* 补全时长单位、修正opacity取值 */
  animation: fade 1.5s ease-in-out 1.5s alternate infinite running;
}
@keyframes fade{
  from {opacity: 0;}
  to {opacity: 1;}
}

效果说明：因为两张图片均使用object-fit: contain规则在容器内居中适配，设置统一的0偏移绝对定位后，两张图会完全在同一视口位置对齐，叠放后的淡入淡出动画不会出现内容错位。

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