EasyFrame is a tool that helps you create sprite sheet animation CSS code.
Lightweight · Zero-config · Zero-JS usage · Just drop and animate
Zero-JavaScript Sprite Sheet Animation Generator Lightweight, automatic, plug-and-play.
EasyFrame is a minimal runtime JavaScript library that automatically generates CSS sprite sheet animations directly from HTML data attributes.
No manual CSS writing. No manual JavaScript initialization. Just add a class and configuration — and it works.
- Zero configuration required
- No manual JavaScript initialization
- Automatic CSS &
@keyframesgeneration - Supports segmented animations
- Supports loop / ping-pong / single play
- Optional pixelated rendering
- Works via CDN, local file, or npm
- UMD + ESM build
<script src="https://cdn.jsdelivr.net/gh/ShuninYu/easy-frame@v1.0.0/dist/easy-frame.umd.min.js"></script>or
<script src="https://cdn.jsdelivr.net/npm/easy-frame/dist/easy-frame.umd.min.js"></script>npm install easyframeES Module:
import EasyFrame from "easyframe";CommonJS:
const EasyFrame = require("easyframe");<script src="easyframe.min.js"></script>
<div
class="ef-sprite"
data-ef="size:64x64;frames:6;duration:1"
data-ef-src="/images/character.png">
</div>That’s it.
When the page loads, EasyFrame:
- Scans all
.ef-spriteelements - Parses the
data-efconfiguration - Generates CSS classes
- Injects
@keyframesinto<head> - Automatically applies animation
All animation settings are defined inside the data-ef attribute.
Format:
data-ef="key:value;key:value;flag"
| Key | Description | Example |
|---|---|---|
| size | Frame size (width x height) | size:64x64 |
| frames | Number or segments | frames:6 or frames:4,3,7 |
| duration | Duration in seconds | duration:1 or duration:0.4,0.2,0.6 |
| Key | Description | Example |
|---|---|---|
| mode | Animation mode | mode:loop |
| pixel | Enables pixelated rendering | pixel |
| Mode | Behavior |
|---|---|
| loop | Infinite loop (default) |
| pingpong | Infinite alternate |
| none | Play once |
Example:
data-ef="size:64x64;frames:4;duration:1;mode:pingpong"<div
class="ef-sprite"
data-ef="size:64x64;frames:4,3,7;duration:0.4,0.2,0.6;mode:pingpong;pixel"
data-ef-src="/sprite/man.png">
</div>This creates:
- 3 animation segments
- Custom duration per segment
- Ping-pong looping
- Pixelated rendering
Set sprite image using:
data-ef-src="/path/to/sprite.png"
If omitted, background image must be defined in CSS.
If elements are added dynamically:
EasyFrame.refresh();| Method | Description |
|---|---|
EasyFrame.init() |
Manually initialize |
EasyFrame.refresh() |
Re-scan DOM |
EasyFrame.version |
Library version |
Works in all modern browsers that support:
querySelectorAllclassListdataset- CSS animations
No dependencies required.
- ~3KB minified
- No external dependencies
EasyFrame focuses on:
- Simplicity
- Minimal runtime cost
- Zero boilerplate
- Clean HTML-driven configuration
Advanced features (multi-row sprites, viewport detection, etc.) may be added in future versions, but the core will remain lightweight.
MIT License © 2026 ShuninYu