JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Un diaporama en HTML et CSS</h1>
  <h2>Première méthode :</h2>
  <div class="diaporama1">
  
  </div>

CSS

body{
 margin: 0px;
 padding: 0px;
 width: 100%;
}
.diaporama1{
    margin: 0 auto;
 width: 960px; 
 height: 500px;
 border: 3px solid #333;
 background-image: url("https://picsum.photos/200");
 background-repeat: no-repeat;
 
 
 animation-name: diapo1;
 animation-duration: 9s;
 animation-timing-function: linear;
 animation-iteration-count: infinite;
 animation-direction: normal;
}


@keyframes diapo1{
    0%{background-image: url("https://picsum.photos/200/300/?random");}
    33%{background-image: url("https://picsum.photos/200/300/?random");} 
 66%{background-image: url("https://picsum.photos/200/300/?random");}
}