CSS, CSS3, Images | Type: PHPSliding Image Background

Cool effect if you have a good enough reason and a wide enough image.

HTML
<div class="wrapper">
<div class="sliding-background"></div>
</div>

CSS
.wrapper {
  overflow: hidden;
}
.sliding-background {
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/9632/sliding-background-wwf.jpg") repeat-x;
  height: 560px; //height of the canvas
  width: 5076px; //min. 3x width of image
  animation: slide 60s linear infinite;
}
@keyframes slide{
  0%{
    transform: translate3d(0, 0, 0);
  }
  100%{
    transform: translate3d(-1692px, 0, 0); //image is 1602 pixels wide x 500 pixels high
  }
}