Crossfading

by Michael Prosser

HTML

<div class="gif"></div>

CSS

.gif{
  animation-name: sequence;
  animation-duration: 14s;
  animation-iteration-count: infinite;
  width:300px;
  height:200px;
  background-position:center center;
  background-size:cover;
}

@keyframes sequence {
  0% { background-image: url(https://wallpaperscraft.com/image/space_flight_sky_stars_82970_1920x1080.jpg); }
  20% { background-image: url(https://awesomewallpapers.files.wordpress.com/2016/01/nebula-2710ceb3c3a7c3a5x1694-16x10.jpg); }
  40% { background-image: url(https://wallpaperscraft.com/image/space_flight_sky_stars_82970_1920x1080.jpg); }
  60% { background-image: url(https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcT6NfWqkPK0s65wF2uo-L_YEwCNxO5K_dieItyZ38of1coXsA_a); }
  80% { background-image: url(https://wallpaperscraft.com/image/space_flight_sky_stars_82970_1920x1080.jpg); }
  100% { background-image: url(https://wallpaperscraft.com/image/space_flight_sky_stars_82970_1920x1080.jpg); }
}