Smooth background animation

Question

Is there a way to make this smoother? Or if anyone knows how to do this better I am all ears. Here is what I have

html {
    background: url(Images/landscape.jpeg)repeat-y;
    background-size: 150%;
    background-position: bottom;
    -webkit-animation: backgroundScroll 190s linear infinite;
    animation: backgroundScroll 190s linear infinite;
}

@-webkit-keyframes backgroundScroll {
    from {
        background-position: 0 0;
    }
    to {
        background-position: -400px 0;
    }
}

@keyframes backgroundScroll {
    from {
        background-position: 0 0;
    }
    to {
        background-position: -400px 0;
    }
}

html isnt important its just the background element you can see what I'm doing in the CSS. Background is applied to the html. No content — Jhodges11, Apr 02 '16 at 03:34

score 0 · Answer 1 · answered Apr 02 '16 at 04:03

You might get better results setting the background image on an element and then moving the entire element with transform: translate:

@keyframes doScroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-400);
  }
}

Check out this older, but still relevant article.

score 0 · Answer 2 · answered Apr 02 '16 at 04:20

0

I got it! I just needed to play with the interval speed. I slowed it down to around 85s and its a lot smoother. I was dragging it out to long.

answered Apr 02 '16 at 04:20

Jhodges11

15
3

score 0 · Answer 3 · answered Apr 02 '16 at 05:20

You can do it like this:

html {

    background: url(http://static.adzerk.net/Advertisers/c878296c4c7f43b8bbb285acb73c0e6c.png)repeat-y;
    background-size: 150%;
 background-position: 0px 0px;
 animation: animatedBackground 15s linear infinite;
 -moz-animation: animatedBackground 15s linear infinite;
 -webkit-animation: animatedBackground 15s linear infinite;
 -ms-animation: animatedBackground 15s linear infinite;
 -o-animation: animatedBackground 15s linear infinite;
}
@keyframes animatedBackground {
 0% { background-position: 0 0; }
 100% { background-position: -400px 0; }
}
@-moz-keyframes animatedBackground {
 0% { background-position: 0 0; }
 100% { background-position: -400px 0; }
}
@-webkit-keyframes animatedBackground {
 0% { background-position: 0 0; }
 100% { background-position: -400px 0; }
}
@-ms-keyframes animatedBackground {
 0% { background-position: 0 0; }
 100% { background-position: -400px 0; }
}
@-o-keyframes animatedBackground {
 0% { background-position: 0 0; }
 100% { background-position: -400px 0; }
}

Smooth background animation

3 Answers3