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