Comprehensive Guide to Front-End Animation: Classification, Implementation Methods, and Scenario-Based Selection

This article, authored by the Vivo Internet Front‑End Team, provides a systematic classification of front‑end animation techniques and presents practical implementation methods for each category. It concludes with a scenario‑based recommendation guide for choosing the most suitable animation solution in real‑world development.

1. Background

Front‑end animation is required in many scenarios, yet developers often feel confused about which technical solution to adopt. Existing animation libraries are abundant, making the selection process difficult.

2. Classification

2.1 By Usage

Animations are divided into display‑type (e.g., GIFs, videos, transition effects when opening a treasure box) and interactive‑type (e.g., red‑packet rain, where users can trigger actions at specific frames).

2.2 By Rendering Technique

The final rendering on the front‑end can be one of three forms:

Canvas

DOM element (div)

SVG

Each technique has distinct performance characteristics and suitability. For example, Canvas offers high efficiency for bitmap‑intensive games, while SVG excels at resolution‑independent vector graphics.

2.3 By Animation Type

The article discusses five major animation types and their typical implementation approaches:

Frame (Sprite‑sheet) Animation : Implemented via GIF, CSS animation with steps() , or JavaScript canvas drawing.

Tween (Keyframe) Animation : Implemented with CSS transition / animation , or JavaScript libraries such as Anime.js or GSAP.

SVG Animation : Defined via XML paths and animated with libraries like Anime.js or GSAP.

Bone Animation : Created with tools like Spine or DragonBones and rendered via front‑end engines.

3D Animation : Achieved with CSS 3D transforms or WebGL libraries such as Three.js.

3. Detailed Implementation Examples

3.1 Frame Animation with CSS Sprite‑sheet

<div class="sprite"></div>

.sprite {
    width: 300px;
    height: 300px;
    background-repeat: no-repeat;
    background-image: url(frame.png);
    animation: frame 333ms steps(1, end) both infinite;
}

@keyframes frame {
    0%   {background-position: 0   0;}
    5%   {background-position: -300px 0;}
    10%  {background-position: -600px 0;}
    /* ... omitted intermediate steps ... */
    100% {background-position: -6000px 0;}
}

3.2 Frame Animation with JavaScript Canvas

<canvas id="canvas" width="300" height="300"></canvas>

3.3 Using steps() in CSS

The steps(number_of_steps, direction) function creates a stair‑case timing function. The first parameter defines the number of intervals; the optional second parameter ( start or end ) determines whether the step occurs at the beginning or end of each interval.

4. Performance Comparison

Based on Chrome DevTools metrics (FPS, CPU, GPU, scripting, rendering, painting, memory), the following observations were made:

All CSS‑based solutions achieve 60 FPS, but the transform:translate3d() variant shows the lowest CPU and GPU usage.

Canvas‑based JS animation has the lowest GPU consumption.

CSS solutions have no script overhead.

Rendering and painting costs are minimal for the transform:translate3d() approach.

5. Summary of Existing Solutions

5.1 Pure CSS – Suitable for simple display animations. Low development cost, no extra dependencies, but limited to basic effects.

5.2 Anime.js – Handles simple to moderate interactive animations, supports keyframes, timelines, callbacks, promises, and SVG paths. Pros: rich API, good performance, easy control. Cons: not ideal for highly complex or heavy‑interaction scenarios.

5.3 Lottie – Renders After Effects animations exported as JSON via Bodymovin. Excellent for complex visual effects, cross‑platform, small file size. Cons: limited interactivity, some AE features not supported.

5.4 PixiJS – A 2D WebGL rendering engine (fallback to Canvas). Ideal for interactive animations, games, and bone‑animation rendering (Spine/DragonBones). Pros: GPU acceleration, extensive API. Cons: WebGL not supported on older Android (4.4) devices, requires additional code for non‑rendering logic.

6. Recommendation Flow

For simple display effects, start with native CSS transition / animation .

If lightweight interactivity is needed, consider Anime.js.

For complex, designer‑driven animations, use Lottie (AE → JSON → SVG/Canvas).

For interactive games or bone‑animation requirements, adopt PixiJS together with Spine or DragonBones.

By following this hierarchy, developers can choose the most efficient and maintainable solution for each animation scenario.