CSS Image Rotations

CSSImageRotations.html

   <style>
   .fadein {position:relative;height:300px;width:450px}
@keyframes fade { 0% {opacity:0} 11.11% {opacity:1} 33.33% {opacity:1} 44.44% {opacity:0} 100% {opacity:0}}
.fadein img {position:absolute;left:0;right:0;opacity:0;animation-name:fade;animation-duration:18s;animation-iteration-count:infinite}
.fadein img:nth-child(1) {animation-delay:0s}
.fadein img:nth-child(2) {animation-delay:3s}
.fadein img:nth-child(3) {animation-delay:6s}
.fadein img:nth-child(4) {animation-delay:9s}
   </style>
   <div class='fadein'>

        <img src='/files/image/1286010569/450' alt='Design'/>

        <img loading='lazy' src='/files/image/1286010681/450' alt='Install'/>

        <img loading='lazy' src='/files/image/1286010625/450' alt='Execute'/>

        <img loading='lazy' src='/files/image/1286010793/450' alt='Results'/>

    </div>