See Create a Brilliant Sprited, CSS-Powered Firefox Animation. An animation consists of multiple frames which are shown in a sequence at set intervals. The image with multiple fox images in different positions (shown above the animation) is called a sprite sheet image. Each fox is a sprite and it is called a frame. In order to create the running animation, the sprites have to be drawn one after the other as time passes. To generate a sprite image you can use for example free tools as Sprite Pad or GIMP.
We position the sprite sheet image as a background, where just a single sprite can be visible (like a window on the sprite-sheet). The width of the window must be the width of a single frame in the sprite-sheet. Then we shift the background frame after frame infinitely.
The time a frame is kept on the screen needs to be determined according to the animation speed. In the fox sprite-sheet image there are 44 frames with 156 pixels width each one. We set the animation of the complete cycle (animation of all 44 frames) to 3.75 seconds. Thus, each frame is visible 3.75/44 seconds. The transition between frames is done in step function. Every step we shift the background image by 156px, which is the frame width (total for all frames: 44 * 156px = 6864px). 44 frames -> 44 steps.
The animation in this case is infinite. This means that when the animation reachs the last frame, it jumps to the first frame and starts again.