Question

I have a div element with a big image background css rule.

Now I would like to slide the image in x-axis smoothly, is there any lightweight plugin or snippet?

Any suggestions are appreciated!

Answer 1

Here’s the style for webkit: http://jsbin.com/uzifag/2/

Note that I’m moving the background-position to negative width of the image. If you want it to be the opposite direction, positive width will work. You can play with the duration of the animation as suits your needs.

body{
  background:url(http://placekitten.com/1920/1080/) repeat-x center left;
  -webkit-animation: slidex 20s linear infinite;
     -moz-animation: slidex 20s linear infinite;
      -ms-animation: slidex 20s linear infinite;
       -o-animation: slidex 20s linear infinite;
          animation: slidex 20s linear infinite;
}

@-webkit-keyframes slidex
{
  FROM{background-position:0 center;}
  TO{background-position:-1920px center;}
}
@-moz-keyframes slidex
{
  FROM{background-position:0 center;}
  TO{background-position:-1920px center;}
}
@-ms-keyframes slidex
{
  FROM{background-position:0 center;}
  TO{background-position:-1920px center;}
}
@-o-keyframes slidex
{
  FROM{background-position:0 center;}
  TO{background-position:-1920px center;}
}
@keyframes slidex
{
  FROM{background-position:0 center;}
  TO{background-position:-1920px center;}
}