Smooth frame moving animation in css

Question

Im using a sprite sheet in javascript/css and something I wanted to do was use the same 3 frames (the sprite walking) infinite times until it reaches the 100% mark.

This is what I am doing in css:

.WomenAnimation{
    animation: moveGirl 3s steps(30) infinite;
    -webkit-animation: moveGirl 3s steps(30) infinite;
    -moz-animation: moveGirl 3s steps(30) infinite;
    -ms-animation: moveGirl 3s steps(30) infinite;
    -o-animation: moveGirl 3s steps(30) infinite;
}

@keyframes moveGirl {
   from { background-position: -600px; left:240px}
     to { background-position: -1200px; left:750px}
}

@-webkit-keyframes moveGirl {
   from { background-position: -600px; left:240px}
     to { background-position: -1200px; left:750px}
}

@-moz-keyframes moveGirl {
   from { background-position: -600px; left:240px}
     to { background-position: -1200px; left:750px}
}

@-ms-keyframes moveGirl {
   from { background-position: -600px; left:240px}
     to { background-position: -1200px; left:750px}
}

@-o-keyframes moveGirl {
   from { background-position: -600px; left:240px}
     to { background-position: -1200px; left:750px}
}

So as you can see I'm trying to move it across the screen in 3 seconds trying to make it look smooth, but what I get is the sprite teleporting and doing some weird movements.

Edit:

Here is the female sprite so you can try to move her across the div. As well as the div in the html and some css that goes along with it.

#bg{
    width:640px;
    height:500px;
}

#WomenSprite{
    overflow:hidden;
    width:200px;
    height:200px;
position:absolute;
background-image:url("http://imageshack.com/a/img14/3948/z5pt.png");

}

<div id="bg">
    <div id="WomenSprite"></div>
</div>

Answer 1

You need to remove the steps property of your animation;

 animation: moveGirl 3s steps(30) infinite;

steps(30) is causing the problem.

Example:

Fiddle (no steps)
Fiddle (steps)

---

EDIT

Thanks for @Gaby aka G. Petrioli for pointing out the real problem.

So, as you are using a sprite with animation parts, and also a position animation, you need to have 2 animations. One with the steps(30) and also background-position, and another one with just the div animation.

Something like this:

.WomenAnimation {
    -webkit-animation:
         moveGirl1 3s linear infinite ,
         moveGirl2 3s steps(30) infinite ;
}

@-webkit-keyframes moveGirl1 {
   from { left:240px; }
     to { left:750px; }
}

@-webkit-keyframes moveGirl2 {
   from { background-position: -600px; }
     to { background-position: -1200px; }
}

This way moveGirl1 is going to be linear and fluid, and moveGirl2 is going to be stepped, as it is the sprite positions.

---

Here is the final code working:

FIDDLE