An animation consists of multiple frames which are shown in a sequence at set intervals. The image with multiple monsters in different positions (shown above the animation) is called a sprite sheet image. Each monster 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 monster sprite-sheet image there are 7 frames with 100 pixels width each one. We set the animation of the complete cycle (animation of all 7 frames) to 0.7 seconds. Thus, each frame is visible 0.1 seconds (10 frames per second). The transition between frames is done in step function. Every step we shift the background image by 100px, which is the frame width. 7 frames -> 7 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.