CodePen

HTML

            
              <div id="demo"></div>
            
          
!

CSS

            
              #demo {
  background: #969696;
  width: 400px;
  height:300px;
  color: white;
  font-size: 50px;
  font-family: verdana;
  -webkit-transition: background 300ms ease-in 200ms; /* property duration timing-function delay */
    -moz-transition: background 300ms ease-in 200ms;
    -o-transition: background 300ms ease-in 200ms;
    transition: background 300ms ease-in 200ms;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              var sequence=["http://goo.gl/u4QHd",
              "http://goo.gl/s5tmq",
              "http://goo.gl/MMsQ6",
              "http://goo.gl/dtEYw"
             ];

(function() {
    var i = 0;
    (function loop() {
        document.getElementById("demo").style.background="url("+(sequence[i])+")";
      i = (i+1)% sequence.length;
        setTimeout(loop, 5000);
    }());
}());
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................