CSS keyframe animation not working on floated element

Question

Hi I am building a simple slider to present a project.

The slider is based on swipe.js.org . I am doing everything as I should, except one thing: While every slide div contains only one image, one slide contains 2 overlapping images #img7-1 & #img7-2. I am overlaying those two images to fade the opacity of the upper image.

Below is my css. The order of elements represents the structure of the elements in the DOM. I also have a link to the presentation at the end if you just want to look at the page source.

.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-1{
  position: relative;
  z-index: 1;
}
#img7-2{
  position: absolute;
  z-index: 2;
animation: fade 1.5 ease-in-out 1.5s alternate infinite running;
}
@keyframes fade{
  from {opacity: 0%;}
  to {opacity: 100%;}
}

You can view the presentation here , all the code, styles & js (except cdn library) is on that html page.

If anyone knows this, please help me - coding is not my best skill. Thanks everyone.

Edit: div elements affected in dom:

<div class="swipe-wrap">
  <div>
    <img id="img7-1" src="/images/rivian/Rivian_Storyboards-7-1.jpg">
    <img id="img7-2" src="/images/rivian/Rivian_Storyboards-7-2.jpg">
  </div>
</div>

Answer 1

I ran your code through the CSS validator and it came back saying your shorthand notation for animation was incorrect so this fixed that problem. My next question is what is #img7-2 referring to in your html? I don't see what this animation is being used on in your source code.

EDITED: Once you add top:0 to the img7-2 you can now see the effect happening, before the image was placed outside the browser window. You can change the timing however you'd like.

#img7-2 {
position: absolute;
z-index: 2;
/*animation: overlay 6s ease-in-out infinite running;*/
animation-name: fade;
animation-duration: 1.5s;
animation-timing-function: ease-in-out;
animation-delay: 1.5s;
animation-direction: alternate;
animation-iteration-count: infinite;
animation-play-state: running;
top:0
}