同步CSS移动背景动画

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

问题是，每次（至少几乎每次）动画结束时，它都会不知不觉地重新开始，但目前它只是跳到开始处，您可以看到它

编辑：我正在寻找一个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;}
    }

---

---

如何使其平滑地重复背景？

图像大小为711x711px

---

相应地更新背景位置和背景大小。

您正在更改图像的

背景大小

，但您保留了过渡的原始宽度。将关键帧更新为

背景大小

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

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

或者将

背景大小

更新为关键帧

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;
}

---

试试这个

我想你的背景尺寸要比原稿大。所以在动画中也要尽量做到同样的尺寸

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;}
    }

---

@Claudio很高兴我能帮上忙：）