Sync CSS moving background animation

Question

My website has a star pattern that moves from left to right.

The problem is that every time (at least almost every time) the animation ends it should start over imperceptibly, but currently it just jumps to the start, and you can see it.

Edit: I'm looking for a CSS solution, no JavaScript.

---

Code

body {
height: 100%;
width: 100%;
overflow: hidden;
margin: 0;
padding: 0;
    background-image:url("http://i57.tinypic.com/2hd5yzc.png");
    background-size: 600px 600px;
    background-attachment: fixed;
    background-position: 0px 0px;
    background-repeat: repeat-y-x;
    animation: moveBG 30s linear 1s infinite;
    -webkit-animation: moveBG 5s linear 1s infinite;
}

@keyframes moveBG {
    from {background-position: 0;}
    to {background-position: 798px 0;}
    }

@-webkit-keyframes moveBG {
    from {background-position: 0 0;}
    to {background-position: 798px 0;}
    }

---

Here's a fiddle

How could I make it repeat the background smoothly?

Answer 1

I guess you are making background size greater than the original.So try to make it same in animation too.

background-size: 600px 600px;

And Animation

@keyframes moveBG {
    from {background-position: 0;}
    to {background-position: 600px 0;}
    }

@-webkit-keyframes moveBG {
    from {background-position: 0 0;}
    to {background-position: 600px 0;}
    }

Fiddle

Answer 2

You are changing the background-size of your image, but you have retained the original width for your transition. Either update your keyframes to your background-size

@keyframes moveBG {
    from {background-position: 0;}
    to {background-position: 600px 0;}
    }

@-webkit-keyframes moveBG {
    from {background-position: 0 0;}
    to {background-position: 600px 0;}
    }

or update your background-size to your keyframes

body {
height: 100%;
width: 100%;
overflow: hidden;
margin: 0;
padding: 0;
    background-image:url("http://i57.tinypic.com/2hd5yzc.png");
    background-size: 798px 798px;
    background-attachment: fixed;
    background-position: 0px 0px;
    background-repeat: repeat-y-x;
    animation: moveBG 5s linear 1s infinite;
    -webkit-animation: moveBG 5s linear 1s infinite;
}

try this JSFiddle

Answer 3

The image size is 711x711px.

Update background-position and background-size accordingly.