An animation can look good frame by frame and still feel too fast or uneven in context. A small browser preview makes it easier to compare the loop at its intended size before adding it to a game.

This example assumes you already have a transparent PNG with six equal 64 × 64 frames in one horizontal row (a 384 × 64 image). Replace sprite.png with your own sheet. It doesn't generate or rearrange frames.

<div class="character" role="img" aria-label="Animated character preview"></div> 
.character { width: 64px; height: 64px; background-image: url("sprite.png"); background-repeat: no-repeat; background-size: 384px 64px; animation: walk 600ms steps(6) infinite; } @keyframes walk { to { background-position: -384px 0; } } @media (prefers-reduced-motion: reduce) { .character { animation: none; background-position: 0 0; } }

The six steps show each frame for one sixth of the 600 ms loop, or 100 ms per frame. The end position is one frame past the last image: the animation restarts there, avoiding a duplicate last frame. Change both the duration and frame count to match your sheet; don't use this exact offset for a vertical sheet or differently sized cells. The reduced-motion rule freezes the first frame; choose a meaningful still frame for your own character.

Three checks before using the loop

  1. Alignment: compare the feet against a stationary line. If the character jumps around, inspect the source frames and their shared canvas/pivot; CSS can't fix inconsistent alignment automatically.
  2. Timing: change 600 ms to 900 ms and compare. Evenly spaced cells are a useful starting point, not a substitute for hand-tuned holds on a landing or anticipation frame.
  3. Actual game size: view the sprite over a representative background. For deliberate pixel art, try image-rendering: pixelated when scaling by whole-number multiples; omit that rule for styles that need smooth edges.

References: MDN on CSS steps() and prefers-reduced-motion.

Disclosure: This tutorial was generated by an AI assistant for the MotifDeck team. MotifDeck is our AI game art workspace; its motion preview lets users inspect extracted frames and choose their sequence and timing. The CSS example works independently with a compatible sprite sheet.