Rotate Image CSS Animation - css

Question

I can rotate an image horizontally just fine, but I'm having trouble syncing it. In the example I have below, when the animation runs, it starts but I need it to overflow back to the beginning so it looks like its running continuously instead of it restarting in the middle. I'm not sure how to do this.
As a sidenote, I know rotateZ(degrees) can do this at an angle, do I just need to specify it at the 0% or do I need to start it here, and then change it in the 100%?
.frontworld {
background-image: url('https://cdn3.volusion.com/bstu5.rxjt6/v/vspfiles/photos/WP11001-2.jpg?1529080068');
background-repeat: no-repeat;
background-color: green;
background-size: 60px;
border-radius: 50%;
display: block;
width: 50px;
height: 50px;
position: absolute;
top: 100px;
left: 300px;
z-index: 100;
animation: world 5s linear infinite;
-webkit-animation-play-state: paused;
-moz-animation-play-state: paused;
-o-animation-play-state: paused;
animation-play-state: paused;
}
.frontworld:hover {
animation-play-state: running;
}
#keyframes world{
0% {
background-position: 0px;
}
100% {
background-position: 30px;
}
}
<div class="frontworld"></div>
https://jsfiddle.net/2z8193db/1/

Answer 1

A straight-forward solution could be to use your code as it is, and only change the background-position in your keyframes.
#keyframes world {
0% {
background-position: -60px;
}
100% {
background-position: 60px;
}
}
I'm using 60px because that is what you have set your background-size to be.
And instead of starting from the middle, I've used a negative offset for the starting position, so that the background starts completely off the left side.
Since the background image is completely off-screen at 0% and 100%, you won't see it moving from one side to the other between repeating itself.