EasyFrame is a lightweight JavaScript library that brings sprite sheet animations to your web projects with zero manual CSS coding. Simply include the library, add a few data attributes to your HTML elements, and EasyFrame automatically generates and injects the required @keyframes and class rules.
After loading easyframe.js, any element with the class ef-sprite and a data-ef attribute will be animated. The data-ef attribute defines the sprite size, frame count, duration, and animation mode. Optionally, use data-ef-src to set the background image.
<div class="ef-sprite" data-ef="size:64x64;frames:6;duration:1;mode:loop" data-ef-src="/images/character.png"></div>No need to write a single line of CSS – the library handles everything, even complex multi‑segment animations.
Zero‑configuration – Just add data attributes and the animation runs.
Lightweight & dependency‑free – Pure JavaScript, no external libraries.
Automatic style injection – Animations are added to the page on the fly.
Compound animations – Use arrays for frames and duration to create multi‑speed sequences (e.g., running + jumping).
Pixel art support – Enable image-rendering: pixelated with the pixel flag.
Flexible loop modes – Choose loop, pingpong (infinite alternate), or none (play once).
Server‑side free – All processing happens in the browser; your images stay local.
Add frame animations to your website without uploading large video files.
Interactive UI elements that need simple frame‑based motion.
Demonstrate animations in design mockups.
EasyFrame was born from the AnimeCursor project. What started as a personal tool for generating CSS quickly evolved into a full‑fledged library to help developers skip the tedious part of sprite animation. No more manual keyframe percentages – just describe your sprite and let EasyFrame do the rest.