Question

I’ve been experimenting lately with some css3. What I’m trying to do is make a background image slide left and repeat seamlessly to give the effect of an infinite background animation (kind of like how they do backgrounds in old cartoons, where it’s just looping over and over…). The problem that I’m facing with this css3 is that once the animation is complete, it snaps back into it’s starting position. See here: my blog. The background of the entry titled “super sluggy” will snap back into place after the animation has completed. I’ve been looking through w3schools for the answer, and google and even related stack questions but I can’t find the solution anywhere. Here is my code:

@keyframes l_2_r
{
from {background-position: top left;}
to {background-position: top right;}
}

@-moz-keyframes l_2_r
{
from {background-position: top left;}
to {background-position: top right;}
}

@-webkit-keyframes l_2_r
{
from {background-position: top left;}
to {background-position: top right;}
}

@-o-keyframes l_2_r
{
from {background-position: top left;}
to {background-position: top right;}
}

#sluggy_div{
background: url('../imgs/sluggy-bg.jpg') repeat-x;
animation: l_2_r 7s linear infinite;
-moz-animation: l_2_r 7s linear infinite;
-webkit-animation: l_2_r 7s linear infinite;
-o-animation: l_2_r 7s linear infinite;
}

the background itself is seamless if repeated along the x axis, however when animated the transition is a quick snap and I’d like it to be seamless or not noticable to the user I should say.

Does anyone know how to fix this? Thanks!

Answer 1

The easiest solution I came up with is to simply animate the background-position in the x direction from 0 to a position that’s effectively the negative of its width (in this case -1000px):

@-webkit-keyframes l_2_r {
    from {background-position: 0 0;}
    to {background-position: -1000px 0;}
}

#sluggy {
    width: 560px;
    height: 374px;
    border: 1px solid #f90; /* just for visibility */
    background-image: url(http://digitalbrent.com/imgs/sluggy-bg.jpg);
    -webkit-animation: l_2_r 7s linear infinite;
}​

JS Fiddle (Webkit-vendor-prefix only) demo.

And this seems, in Chromium 18, to work fine. Hopefully you don’t mind my using your actual images in the demo, but I didn’t have any suitable images with which to test.