Sprite Sheet CSS Animation Generator

Ek sprite sheet ko copy-paste CSS steps() animation mein badlein, ek live preview ke saath, seedhe aapke browser mein.

Aapki sprite sheet locally aapke browser mein read hoti hai preview banane aur CSS generate karne ke liye; image kabhi upload nahi hoti aur aapke device par hi rehti hai.

Output tidy kar rahe hain? CSS Formatter try karein.

Sprite Sheet CSS Animation Generator ke baare mein

Yeh sprite sheet CSS animation generator ek frame strip ya grid ko ready-to-paste CSS animation mein badalta hai jo @keyframes aur steps() timing function par bana hota hai. Live preview ke liye ek sprite sheet image drop karein, ya bas frame width, height aur count type karein aur tool ko background-position ka math karne dein. Yeh single horizontal row aur poora grid dono handle karta hai, frames ko row-major columns aur phir rows ke across walk karke, aur keyframes ko background-size ke saath pair karta hai taaki har cell exactly land ho. Speed ko FPS ya total duration se set karein, animation ko naam dein, infinite ya fixed iteration count chunein, aur ek direction pick karein. Aapko poora CSS milta hai — element sizing, @keyframes block aur animation shorthand — jise aap copy ya .css file ke roop mein download kar sakte hain. Sab kuch aapke device par chalta hai, isliye ek uploaded sheet locally read hoti hai aur kabhi aapke browser se bahar nahi jaati.

Features

Sprite Sheet CSS Animation Generator kaise use karein

  1. Ek sprite sheet upload karein, ya upload skip karke bas apni frame dimensions enter karein.
  2. Single row ya grid pick karein, phir frame width, height aur count set karein (grid ke liye plus columns aur rows).
  3. Speed ko FPS ya total duration se set karein, phir animation ko naam dein aur iteration aur direction chunein.
  4. Live preview mein element ko animate hota dekhein taaki framing sahi confirm ho.
  5. Generated CSS copy karein ya .css file ke roop mein download karke apne project mein daalein.

Example

Input

8 frames, 64×64 each, single row, 12 fps, infinite

Output

.sprite {
  width: 64px;
  height: 64px;
  background-repeat: no-repeat;
  animation: sprite 0.667s steps(8) infinite normal;
}

@keyframes sprite {
  from { background-position: 0 0; }
  to { background-position: -512px 0; }
}

Ek single-row sheet ko saare frames play karne ke liye sirf steps(8) aur ek two-stop keyframe chahiye.

Common errors aur troubleshooting

Aksar pooche jaane wale sawaal

steps() ek sprite sheet ko kaise animate karta hai?
steps(n) animation ko n equal chunks mein split karta hai aur interpolate karne ke bajaye unke beech jump karta hai, isliye background-position ek frame se agle par snap karta hai. steps() ko apne frame count ke barabar rakhne ka matlab har frame ek step ke liye dikhta hai bina kisi blurry in-between position ke.
Kya mujhe apni image upload karni zaroori hai?
Nahi. Sprite sheet upload karne se aapko live preview milta hai, par aap sirf frame width, height aur count se correct CSS generate kar sakte hain. Image ke bina preview ek placeholder grid dikhata hai jabki math aur output accurate rehte hain.
Single-row aur grid mode mein kya difference hai?
Single-row mode maanta hai ki saare frames ek horizontal strip par hain aur ek compact from/to keyframe emit karta hai. Grid mode multi-row sheets ko har frame ke liye ek background-position stop emit karke handle karta hai, columns ke across aur phir rows ke neeche move karke, aur background-size add karta hai taaki poori sheet sahi scale ho.
Mujhe FPS set karna chahiye ya total duration?
FPS use karein jab aapko pata ho ki har second kitne frames play hone chahiye; tool ise duration mein convert karta hai frame count ko FPS se divide karke. Total duration use karein jab aap chahte hain ki poora loop specific number of milliseconds le, frame count se independent.
Main animation ko hamesha ke liye ya sirf kuch baar kaise loop karun?
Non-stop loop ke liye Infinite chunein, jo animation-iteration-count: infinite par map hota hai. Sequence ko fixed number of times play karne ke liye Count chunein aur ek number enter karein, aur reverse ya alternate playback ke liye direction option use karein.
Kya meri sprite sheet kahin upload hoti hai?
Nahi. Image locally aapke browser ke FileReader se read hoti hai preview banane ke liye aur woh kabhi aapke device se bahar nahi jaati; generated CSS poori tarah aapki machine par compute hota hai.

Related tools

Saare ArrayKit tools