Slider fade in

<style>

  #stage {
    margin: 1em auto;
    width: 382px;
    height: 292px;
  }

  #stage a {
    position: absolute;
  }
  #stage a img {
    padding: 10px;
    /*border: 1px solid #ccc;*/
   /* background: #fff;*/
  }

  #stage a:nth-of-type(1) {
    animation-name: fader;
    animation-delay: 3s;
    animation-duration: 1s;
    z-index: 20;
  }
  #stage a:nth-of-type(2) {
    z-index: 10;
  }
  #stage a:nth-of-type(n+3) {
    display: none;
  }

  @keyframes fader {
    from { opacity: 1.0; }
    to   { opacity: 0.0; }
  }

</style>

<div id="stage">
  <a><img src="https://unsplash.it/500/450?image=766" alt="bb"></a>
  <a><img src="https://unsplash.it/500/450?image=889" alt="bb"></a>
  <a><img src="https://unsplash.it/500/450?image=1080" alt="bb"></a>
</div>

<script>

  window.addEventListener("DOMContentLoaded", function(e) {

    // Original JavaScript code by Chirp Internet: chirpinternet.eu
    // Please acknowledge use of this code by including this header.

    var stage = document.getElementById("stage");
    var fadeComplete = function(e) { stage.appendChild(arr[0]); };
    var arr = stage.getElementsByTagName("a");
    for(var i=0; i < arr.length; i++) {
      arr[i].addEventListener("animationend", fadeComplete, false);
    }

  }, false);

</script>