JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<div class="image-fader anim1">
<picture><source srcset="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" media="(max-width: 480px)"><img src="https://hloe.co.uk/images/test0001.jpg" alt=""/></picture>
<picture><source srcset="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" media="(max-width: 480px)"><img src="https://hloe.co.uk/images/test0002.jpg" alt=""/></picture>
<picture><source srcset="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" media="(max-width: 480px)"><img src="https://hloe.co.uk/images/test0003.jpg" alt=""/></picture>
<picture><source srcset="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" media="(max-width: 480px)"><img src="https://hloe.co.uk/images/test0004.jpg" alt="" rel="preload" fetchpriority="high"/></picture>
</div>

<div class="image-fader anim2">
<picture><source srcset="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" media="(max-width: 480px)"><img src="https://hloe.co.uk/images/test0001.jpg" alt=""/></picture>
<picture><source srcset="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" media="(max-width: 480px)"><img src="https://hloe.co.uk/images/test0002.jpg" alt=""/></picture>
<picture><source srcset="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" media="(max-width: 480px)"><img src="https://hloe.co.uk/images/test0003.jpg" alt=""/></picture>
<picture><source srcset="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" media="(max-width: 480px)"><img src="https://hloe.co.uk/images/test0004.jpg" alt="" rel="preload" fetchpriority="high"/></picture>
</div>

CSS

.image-fader {position:relative;
  width: 300px;
  height: 300px;
}

.anim1 img, .anim2 img {
  position: absolute;
  top: 0px;
  left: 0px;
  animation-name: imagefade;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 40s;
}

@keyframes imagefade {
0% {opacity:1;}
10% {opacity:1;}
15% {opacity:0;}
85% {opacity:0;}
90% {opacity:1;}
100% {opacity:1;}
}

.anim1 picture:nth-of-type(1) img {animation-delay: 30s;}
.anim1 picture:nth-of-type(2) img {animation-delay: 20s;}
.anim1 picture:nth-of-type(3) img {animation-delay: 10s;}
.anim1 picture:nth-of-type(4) img {animation-delay: 0s;}

.anim2 picture:nth-of-type(1) img {animation-delay: 35s;}
.anim2 picture:nth-of-type(2) img {animation-delay: 25s;}
.anim2 picture:nth-of-type(3) img {animation-delay: 15s;}
.anim2 picture:nth-of-type(4) img {animation-delay: 5s;}