过渡背景图像开关

Question

我希望我的背景图片每x秒切换一次，所以我使用了这种方法How do I change the background image every X seconds?

但是我有一个问题，它是非常abrubt切换是否有办法在此过渡？

var images = [
  "https://www.royalcanin.com/~/media/Royal-Canin/Product-Categories/cat-adult-landing-hero.ashx",
  "https://placehold.it/1920x1080",
  "https://upload.wikimedia.org/wikipedia/commons/4/4d/Cat_March_2010-1.jpg"
]

var imageHead = document.getElementById("image-head");

var i = 0;
setInterval(function() {
      imageHead.style.backgroundImage = "url(" + images[i] + ")";
      i = i + 1;
      if (i == images.length) {
        i =  0;
      }
}, 5000);

body,html {
 height:100%;
 margin:0;
}

.image-head {
  background: url('https://placehold.it/1920x1080') no-repeat top center fixed;
  background-size: cover;
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  color: black;
  text-align: center;
}

<!-- begin snippet: js hide: false console: true babel: false -->

<div id="image-head">
  <div class="centering-hack">
      <h1>Something HTML</h1>
  </div>
</div>