Display different images of <div>, at a time of 2s each

Question

I have a div with an img and I need that div has 3 different images, in a time of 2s each. I am using Html5 and css3

<img src="01.png" class="img1">
<img src="02.png" class="img-2">
<img src="03.png" class="img-3">
<img src="04.png" class="img4">
</div>

CSS:

.azul{width:300px height:250px bgc:blue}
Img-1{
   position:relative;
   Animation-name:primeiro;
   Animation-interation-count-15;
   Animation-diraction:alternate;
   Animation-deplay:0s;
}
Img-2{
   position:relative;
    Opacity:0;
   Animation-name:segunto;
    Animation-duration:2s;
   Animation-interation-count-15;
   Animation-diraction:alternate;
   Animation-deplay:4s;
}
Img-3{
   position:relative;
    Opacity:0;
  Animation-name:terceiro;
    Animation-duration:2s;
   Animation-interation-count-15;
   Animation-diraction: 
   alternate;
   Animation-deplay:6s;
}
Img-4{
   position:relative;
    Opacity:0;
   Animation-name:quarto;
    Animation-duration:2s;
   Animation-interation-count-15;
   Animation-diraction: 
     alternate;
   Animation-deplay:8s;
}
@keyframes primeiro{
     100%{ opacity:0;
      } 
}
@keyframes segundo{
     100%{ opacity:1;
      } 
}

@keyframes terceiro{
     100%{ opacity:1;
      } 
}

@keyframes quarto{
     100%{ opacity:1;
      } 
}

Answer 1

Perhaps the simplest way to do this is by changing the background-image within an animation.

I hope I’ve helped

.azul{
    width:300px;
    height: 250px;
    background-color:blue;
    background-position: center;
    background-size: cover;
    animation-name: images;
    animation-duration: 6s;
    animation-direction: alternate-reverse;
    animation-iteration-count: infinite;
    transition: background-image 50ms ease-in-out;
}

@keyframes images {
    0% {
        background-image: url('https://i.pinimg.com/originals/be/69/7f/be697f57c6a6de2c357a4fce7f79aee3.jpg');
    }
    50% {
        background-image: url('https://organicsnewsbrasil.com.br/wp-content/uploads/2016/03/imagens-lindas-imagens-lindas-nascer-do-sol-471.jpg');
    }
    100% {
        background-image: url('https://s2.glbimg.com/7B_srQyXERP_NoJCHSzgOnuwsyc=/smart/e.glbimg.com/og/ed/f/original/2017/07/26/best-sapce-photos-2017-designboom-10.jpg');
    }
}

<div class="azul">
</div>