CSS Sprite Sheet Animation Generator
Zero-coding, lightweight library that automatically injects keyframe animations from simple HTML data attributes.
EasyFrame is a JavaScript library that eliminates the tedious work of writing CSS @keyframes for sprite sheet animations. Just add a few data- attributes to your HTML, and the library dynamically generates and injects the required CSS — no manual calculations, no extra build steps.
Add class="ef-sprite", data-ef and data-ef-src attribute – animation runs automatically.
~3KB minified, no dependencies. Works in all modern browsers.
Use arrays for frames and duration to create multi‑segment sequences with different speeds.
Add pixel flag to enable image-rendering: pixelated for crisp edges.
Choose from loop, pingpong (infinite alternate), or none (play once).
Use our online tool to preview animation, and adjust your configurations.
All processing happens locally – your images never leave your browser.
Include the library via CDN and add a sprite element:
<!-- Include EasyFrame -->
<script src="https://cdn.jsdelivr.net/gh/ShuninYu/easy-frame@v1.0.0/dist/easy-frame.umd.min.js"></script>
<!-- Your sprite element -->
<div class="ef-sprite"
data-ef="size:64x64;frames:6;duration:1;mode:loop"
data-ef-src="/images/character.png">
</div>That's it! The animation will be injected automatically when the page loads.
For more control, explore the online tool or read the tutorial.
The dancing character at the top of this page is powered by EasyFrame – just one <div> with data-ef attributes. No custom CSS was written.