Cat Walk (Sprite)
Six-frame pixel-art cat sprite walks across a ground line. Pure CSS steps() animating background-position across a horizontally-laid-out sprite sheet. Sprite asset is CC0 from OpenGameArt.
beginner ~2 min
A pixel-art cat walks across the ground — six-frame sprite sheet, pure CSS steps().
Why this matters This is the oldest trick in animation — flipbook frames advanced at fixed intervals — ported to the browser in 8 lines of CSS. Every pixel-art website, itch.io game, and retro UI uses this pattern.
What you'll learn
- How steps(N) snaps background-position to discrete frames instead of tweening between them
- The background-size trick: set it to the TOTAL sheet width, not one frame, so the animation advances by frame width per step
- Why image-rendering: pixelated is mandatory when scaling pixel art — bilinear smoothing kills the look
- Composing TWO animations on the same element (the frame-step cycle + the cross-screen translate)
- How to vendor a CC0 sprite asset responsibly (license file, provenance note, attribution as courtesy)
Techniques used
You should be comfortable with
- Basic CSS animation
- Understanding of background-image / background-position
Nhật ký dựng
Toàn bộ phiên Claude Code. Dùng ← → hoặc click chapter để di chuyển.
Live render
No source history available for this session.
This session's build predates the source-history pipeline (or
the transcript touched no files under
src/animations/cat-walk/).
Once a new session is published, the live render will appear here.
Practice Try it yourself
Edit the code on the left, see the result on the right. Your edits are scratch-only — reload resets to the last saved version. Auto-runs when you pause typing; hit Cmd+Enter (or the Run button) to force it.
No source history yet — practice pad loads once this animation has a published
recording with source-history captured.