Alternate between two image scales

by Tan

HTML

<div id="stage_contain">
<div id="stage">
<div><img src="https://www.hloe.co.uk/test_slides/0001.jpg" width="1000" height="500"></div>
<div><img src="https://www.hloe.co.uk/test_slides/0002.jpg" width="1000" height="500"></div>
<div><img src="https://www.hloe.co.uk/test_slides/0003.jpg" width="1000" height="500"></div>
<div><img src="https://www.hloe.co.uk/test_slides/0004.jpg" width="1000" height="500"></div>
</div>
</div>

CSS

#stage_contain {margin: 10px auto;
    width: 100%;
    aspect-ratio:2/1;
    position:relative;
    overflow: hidden; 
 
}

#stage {
    width: 100%;
    height:100%;
    position:absolute;
    overflow: hidden; 
     animation-name: zoomer;
    animation-delay: 0s;
    animation-duration: 7s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
  animation-direction: forward;
  }

  #stage div {
    position: absolute;width: 100%; height: 100%;overflow: hidden;
  }
  #stage div img {
    background: #fff;
    width: 100%; height: 100%; object-fit: cover;
    
  }

  #stage div:nth-of-type(1) {
    animation-name: fader;
    animation-delay: 4s;
    animation-duration: 3s;
    z-index: 20;
  }

  #stage div:nth-of-type(2) {
    z-index: 10;
  }

  #stage div:nth-of-type(n+3) {
    display: none;
  }

  @keyframes fader {
    from { opacity: 1.0; transform: scale(1); }
    to   { opacity: 0.0; transform: scale(1.3); }
  }
  
/*
.scale1 img {transform: scale(1);}
.scale2 img {transform: scale(1.3);}
*/
 @keyframes zoomer {
  0%   {transform: scale(1);}

  100% {transform: scale(1.3);}
  }

JavaScript

window.addEventListener("DOMContentLoaded", function(e) {
  
var stage = document.getElementById("stage");
    
var fadeComplete = function(e) {
stage.appendChild(arr[0]);  

};
    
var arr = stage.getElementsByTagName("div");
     
for(var i=0; i < arr.length; i++) {
arr[i].addEventListener("animationend", fadeComplete, false);
}

}, false);