css-keyframe-background-images

index.html

<html>
    <head>
<style>
body {
  background-color: #fff;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -webkit-animation-duration: 10s;
  -moz-animation-duration: 10s;
  -o-animation-duration: 10s;
  -ms-animation-duration: 10s;
  animation-duration: 10s;
  -webkit-animation-name: bgswap;
  -moz-animation-name: bgswap;
  -o-animation-name: bgswap;
  -ms-animation-name: bgswap;
  animation-name: bgswap;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  -o-animation-iteration-count: infinite;
  -ms-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -moz-animation-timing-function: linear;
  -o-animation-timing-function: linear;
  -ms-animation-timing-function: linear;
  animation-timing-function: linear;
}

@keyframes bgswap {
  0% {
    background-color: red;
  }
  15% {
    background-color: blue;
  }
  16% {
     background-color: red;
  }
  31% {
    background-color: red;
  }
  32% {
    background-color: blue;
  }
  47% {
    background-color: red;
  }
  48% {
    background-color: blue;
  }
  63% {
    background-color: red;
  }
  64% {
    background-color: blue;
  }
  79% {
    background-color: red;
  }
  80% {
    background-color: blue;
  }
  99% {
    background-color: red;
  }
  100% {
    background-color: blue;
  }
}

/*@-webkit-keyframes bgswap {
  0% {
    background-color: red;
  }
  15% {
    background-color: blue;
  }
  16% {
     background-color: red;
  }
  31% {
    background-color: red;
  }
  32% {
    background-color: blue;
  }
  47% {
    background-color: red;
  }
  48% {
    background-color: blue;
  }
  63% {
    background-color: red;
  }
  64% {
    background-color: blue;
  }
  79% {
    background-color: red;
  }
  80% {
    background-color: blue;
  }
  99% {
    background-color: red;
  }
  100% {
    background-color: blue;
  }
}*/

/*@keyframes bgswap {
  0% {
    background-image: url("http://s3.amazonaws.com/massrel-viz-assets/production/15473/01.jpg?1377296581");
  }
  15% {
    background-image: url("http://s3.amazonaws.com/massrel-viz-assets/production/15473/01.jpg?1377296581");
  }
  16% {
    background-image: url("http://s3.amazonaws.com/massrel-viz-assets/production/15474/02.jpg?1377296589");
  }
  31% {
    background-image: url("http://s3.amazonaws.com/massrel-viz-assets/production/15474/02.jpg?1377296589");
  }
  32% {
    background-image: url("http://s3.amazonaws.com/massrel-viz-assets/production/15475/03.jpg?1377296659");
  }
  47% {
    background-image: url("http://s3.amazonaws.com/massrel-viz-assets/production/15475/03.jpg?1377296659");
  }
  48% {
    background-image: url("http://s3.amazonaws.com/massrel-viz-assets/production/15476/04.jpg?1377296665");
  }
  63% {
    background-image: url("http://s3.amazonaws.com/massrel-viz-assets/production/15476/04.jpg?1377296665");
  }
  64% {
    background-image: url("http://s3.amazonaws.com/massrel-viz-assets/production/15477/05.jpg?1377296675");
  }
  79% {
    background-image: url("http://s3.amazonaws.com/massrel-viz-assets/production/15477/05.jpg?1377296675");
  }
  80% {
    background-image: url("http://s3.amazonaws.com/massrel-viz-assets/production/15478/06.jpg?1377296682");
  }
  99% {
    background-image: url("http://s3.amazonaws.com/massrel-viz-assets/production/15478/06.jpg?1377296682");
  }
  100% {
    background-image: url("http://s3.amazonaws.com/massrel-viz-assets/production/15473/01.jpg?1377296581");
  }
}*/

@-webkit-keyframes bgswap {
  0% {
    background-image: url("http://s3.amazonaws.com/massrel-viz-assets/production/15473/01.jpg?1377296581");
  }
  15% {
    background-image: url("http://s3.amazonaws.com/massrel-viz-assets/production/15473/01.jpg?1377296581");
  }
  16% {
    background-image: url("http://s3.amazonaws.com/massrel-viz-assets/production/15474/02.jpg?1377296589");
  }
  31% {
    background-image: url("http://s3.amazonaws.com/massrel-viz-assets/production/15474/02.jpg?1377296589");
  }
  32% {
    background-image: url("http://s3.amazonaws.com/massrel-viz-assets/production/15475/03.jpg?1377296659");
  }
  47% {
    background-image: url("http://s3.amazonaws.com/massrel-viz-assets/production/15475/03.jpg?1377296659");
  }
  48% {
    background-image: url("http://s3.amazonaws.com/massrel-viz-assets/production/15476/04.jpg?1377296665");
  }
  63% {
    background-image: url("http://s3.amazonaws.com/massrel-viz-assets/production/15476/04.jpg?1377296665");
  }
  64% {
    background-image: url("http://s3.amazonaws.com/massrel-viz-assets/production/15477/05.jpg?1377296675");
  }
  79% {
    background-image: url("http://s3.amazonaws.com/massrel-viz-assets/production/15477/05.jpg?1377296675");
  }
  80% {
    background-image: url("http://s3.amazonaws.com/massrel-viz-assets/production/15478/06.jpg?1377296682");
  }
  99% {
    background-image: url("http://s3.amazonaws.com/massrel-viz-assets/production/15478/06.jpg?1377296682");
  }
  100% {
    background-image: url("http://s3.amazonaws.com/massrel-viz-assets/production/15473/01.jpg?1377296581");
  }
}
</style> 
    </head>
    <body>
        test
    </body>
</html>

Funciona como el culo