Sprite Sheet Animations with CSS and JavaScript

Sprite Sheet Animations

Sprite sheet animation is the technique of rapidly cycling through frames arranged in a sprite sheet to create the illusion of motion. This is the digital equivalent of a flipbook — each frame is a slightly different image, and when displayed in quick succession, they appear to move.

CSS Animation with steps()

CSS can animate sprite sheets using the steps() timing function:

.walking-character {
  width: 64px;
  height: 64px;
  background: url('walk-sprite.png') no-repeat;
  animation: walk 0.8s steps(8) infinite;
}

@keyframes walk {
  from { background-position: 0px 0px; }
  to { background-position: -512px 0px; }
}

The steps(8) function tells the browser to divide the animation into 8 discrete steps (matching the 8 frames in the sprite sheet), jumping between positions rather than smoothly interpolating. This creates the frame-by-frame effect.

Key Parameters

• steps(n) — Number of frames in the animation
• animation-duration — Total cycle time (0.8s = 10 FPS per frame)
• background-position — Total distance to travel (frames x frame-width)
• infinite — Loop the animation continuously

JavaScript Frame Animation

For more control (pause, reverse, change speed), use JavaScript:

class SpriteAnimator {
  constructor(canvas, spriteSheet, frameWidth, frameHeight) {
    this.ctx = canvas.getContext('2d');
    this.sheet = spriteSheet;
    this.fw = frameWidth;
    this.fh = frameHeight;
    this.currentFrame = 0;
    this.frameCount = spriteSheet.width / frameWidth;
    this.fps = 12;
    this.lastTime = 0;
  }

  update(timestamp) {
    const elapsed = timestamp - this.lastTime;
    if (elapsed > 1000 / this.fps) {
      this.currentFrame = (this.currentFrame + 1) % this.frameCount;
      this.lastTime = timestamp;
    }

    this.ctx.clearRect(0, 0, this.fw, this.fh);
    this.ctx.drawImage(
      this.sheet,
      this.currentFrame * this.fw, 0,
      this.fw, this.fh,
      0, 0,
      this.fw, this.fh
    );

    requestAnimationFrame((t) => this.update(t));
  }
}

Common Animation Types

Animation	Typical Frames	FPS
Idle breathing	4-6	8
Walk cycle	6-12	12
Run cycle	6-8	15
Attack	4-8	15
Explosion	8-16	20
Loading spinner	8-12	12

CSS-Only Loading Spinner Example

.spinner {
  width: 48px;
  height: 48px;
  background: url('spinner-sprite.png') no-repeat;
  animation: spin 1s steps(12) infinite;
}

@keyframes spin {
  to { background-position: -576px 0; }
}

This creates a smooth loading spinner without any JavaScript or GIF files, giving you full control over size, speed, and color through the sprite sheet.