<article>
  <img class="img img1" src="https://picsum.photos/id/1012/600/400" alt="logo">
  <img class="img img2" src="https://picsum.photos/id/1013/800/300" alt="logo">
  <img class="img img3" src="https://picsum.photos/id/1014/500/350" alt="logo">
  <img class="img img4" src="https://picsum.photos/id/1015/700/400" alt="logo">
</article>

html,
body {
  margin: 0;
  padding: 0;
}

article {
  min-height: 100vh;
  background: red;
  display: grid;
  grid-template-areas:"middle";
}
img {
  margin: auto;
  max-width: 100%;
  max-height: 100vh;
  object-fit: cover;
  height: auto;
  box-shadow:0 0 25px 25px rgba(0,0,0,0.5);
}

.img{transform:scale(0);grid-area:middle;}
.img1{animation:fade1 20s linear infinite}
.img2{animation:fade2 20s linear infinite}
.img3{animation:fade3 20s linear infinite}
.img4{animation:fade4 20s linear infinite}

@keyframes fade1 {
  0%{transform:scale(0)}
  12.5%{transform:scale(1)}
  25%{transform:scale(0)}
}
@keyframes fade2 {
  22%{transform:scale(0)}
  35.5%{transform:scale(1)}
  53%{transform:scale(0)}
}
@keyframes fade3 {
  47%{transform:scale(0)}
  62.5%{transform:scale(1)}
  78%{transform:scale(0)}
}
@keyframes fade4 {
  72%{transform:scale(0)}
  87.5%{transform:scale(1)}
  100%{transform:scale(0)}
}