css - 同步 CSS 移动背景动画

Question

我的网站有一个从左到右移动的星形图案。

问题是每次(至少几乎每次)动画结束都应该不知不觉地重新开始，但目前它只是跳到开始，你可以看到它。

编辑:我正在寻找一个 CSS 解决方案，没有 JavaScript。

---

代码

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

如何让它平滑地重复背景？

Answer 1

我猜你正在使背景尺寸大于原来的尺寸。所以尝试在动画中也使它相同。

background-size: 600px 600px;

和动画

@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