How to Create Frame‑by‑Frame Animations with CSS3, JavaScript, and GIF

What Is Frame‑by‑Frame Animation

Frame‑by‑frame animation (also called sprite animation) is a technique that displays a sequence of different images in rapid succession to create the illusion of motion.

Two conditions are required: (1) a set of related images (animation frames) and (2) continuous playback.

Classic examples include flip‑book style animations from childhood.

Frontend Implementation Options

In front‑end development, three main approaches can achieve frame‑by‑frame animation: GIF, JavaScript, and CSS3 Animation.

1. GIF

GIF files contain multiple frames and play automatically in a loop, making them easy to use for simple decorative animations.

Limited to 256 colors and poor alpha support; image quality may suffer.

Cannot be programmatically paused, stepped, or repeated a specific number of times.

Can cause periodic repainting, impacting performance.

2. JavaScript

JavaScript typically places animation frames in a sprite sheet and changes background-image or background-position via script.

Example: a 19‑frame hand‑reaching animation where the 11th frame triggers an interaction. The sprite sheet is defined with CSS classes .sprite‑rice‑1 … .sprite‑rice‑19, each setting a different background-position. JavaScript swaps the class name to advance frames.

.sprite-rice-1 { background-image:url(http://7xnvb2.com2.z0.glb.qiniucdn.com/img/rice.jpg); background-repeat:no-repeat; }
.sprite-rice-2 { background-position:-900px -489px; }
/* … */
.sprite-rice-19 { background-position:-1200px 0; }

JS offers good compatibility and flexible interaction control.

3. CSS3 Animation

CSS3 uses the steps() timing function to step through frames defined in @keyframes. The animation changes background-position of a sprite sheet at each step.

Example: a three‑frame animation on a touch‑screen page. The sprite is applied to .p8 .page_key with a background image, and the keyframes move the background vertically.

@-webkit-keyframes p8{
  0%   {background-position:0 0;}
  33.33% {background-position:0 -586px;}
  66.66% {background-position:0 -1172px;}
  100% {background-position:0 -1758px;}
}
.p8 .page_key{
  -webkit-animation: p8 steps(1,end) 1.5s infinite;
}

Using steps(3,end) can replace explicit keyframe percentages, letting the browser calculate frame positions automatically.

CSS3 Frame‑by‑Frame Tips

step‑start and step‑end

step-start

is equivalent to steps(1,start) (animation starts at the beginning of each step). step-end is equivalent to steps(1,end) (animation starts at the end of each step).

Calculating Frame Offsets

$spriteWidth: 140px; // sprite width
@keyframes ani{
  100% {background-position: -($spriteWidth * 12) 0; /* 12 frames */ }
}

Responsive Adaptation

Use rem units for static layout elements.

Use px for the animated sprite and apply scale via JavaScript to adapt to different screen sizes.