<div class="slides">
  <div style="--x: 0s"><img src="1.jpg"></div>
  <div style="--x: 4s"><img src="2.jpg"></div>
  <div style="--x: 8s"><img src="3.jpg"></div>
  <div style="--x: 12s"><img src="4.jpg"></div>
</div>

.slides {
  position: relative;
  overflow: hidden;
  height: 400px;
}
.slides>div {
  position: absolute;
  inset: 0;
  opacity: 0;
  animation: show 16s infinite;
  animation-delay: var(--x);
}
.slides>div>img {
  object-fit: cover;
  widht: 100%;
  height: 100%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
@keyframes show {
  0% { opacity: 0; }
  8% { opacity: 1;}
  13%, 25% {
    opacity: 1;
    scale: 1.06;
  }
  38% {opacity: 0;}
}