html,
body {
  height: 100%;
  overflow: hidden;
  background: #eeeeee;
}

@keyframes animateSlides {
  0% { width: 0;}
  100% { width: 100%;}
}

#slider {
  width: 490px;
  height: 350px;
  border-radius: 3px;
  border: 1px solid rgba(0,0,0,0.05);
  box-shadow: 0 0 5px rgba(0,0,0,.5);
  margin: 0 auto;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,.5);
  overflow: hidden;
  
  .slide-1,
  .slide-2,
  .slide-3 {
    width: 0;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: auto;
    bottom: auto;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: left center;
    background-size: auto 100%; /* Fallback */
    transition: all .3s ease-in-out;
  }
  
  .slide-1 {
    width: 100%;
    z-index: 1;
    background-image: url(http://41.media.tumblr.com/0390d80d6c8cc4a7096033182a4bfe8a/tumblr_ndyvukSjNl1tubinno1_1280.jpg);
    animation-delay: 0;
  }
  
  .slide-2 {
    z-index: 2;
    background-image: url(http://40.media.tumblr.com/ca3c1f79e0d81f7e3b4d17bf302d4299/tumblr_ndyvm5VJTx1tubinno1_1280.jpg);
    animation: animateSlides 3s linear;
    animation-delay: 3s;
    animation-fill-mode: forwards;
  }
  
  .slide-3 {
    z-index: 3;
    background-image: url(http://41.media.tumblr.com/fddb3f2b0bdf390efd7ea87372e75fa5/tumblr_ndyg3pYbKW1tubinno1_1280.jpg);
    animation: animateSlides 3s linear;
    animation-delay: 9s;
    animation-fill-mode: forwards;
  }
}