Result

css

#CrossFade {/*コンテナ配置*/
  background: #fff;
  display: flex;
  align-items: flex-end;
  height: 100vh;
  overflow: hidden;
  position: relative;
}
#CrossFade img {/*画像を重ね、透過とアニメーションでフェード効果*/
  position: absolute;
  min-width: 100%;
  min-height: 100%;
  height: auto;
  background: #000;
  backface-visibility: hidden;
  opacity: 0;
  transform: scale(1.4);
  animation: CrossFade 24s infinite;
}
#CrossFade img:nth-child(3) {/*遅延させてギャラリー化*/
  animation-delay: 6s;
}
#CrossFade img:nth-child(2) {
  animation-delay: 12s;
}
#CrossFade img:nth-child(1) {
  animation-delay: 18s;
}

@keyframes CrossFade {/*エフェクト*/
  25% {
    opacity: 1;
    transform: scale(1) rotate(0);
  }
  40% {
    opacity: 0;
  }
}

html

<div id="CrossFade"><img src="//unsplash.it/2500/1500" alt="img"/><img src="//unsplash.it/2505/1500" alt="img"/><img src="//unsplash.it/2510/1500" alt="img"/><img src="//unsplash.it/2515/1500" alt="img"/>
  <div class="intro">
    <h1>Lorem ipsum dolor sit amet</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis impedit facilis nesciunt quam vitae voluptatibus ullam vero.</p>
  </div>
</div>

via

Ken Burns effect CSS only