Command line build tool for spritesheet and css animations generation
Spritefy-Build is a command line tool to generate images spritesheet and css3 animations.
npm install -g spritefy-build
No toy for you IE (Internet Explorer doesn't support css animations)
On OSX, open Terminal, and type:
spritefy -s <sprite_name> -d <images_dir>
Where -s is the name of the sprite and the css3 animation, and -d is the path to the directory which contains the images sequence.
It will generate a folder called sprites in the same directory of the images folder, containing the image sprite and the css file with the animation of the sprite.
Suppose I have a folder with an image sequence of pngs generated by Adobe Flash or After Effects, and you want to animate it in HTML/CSS.
This folder is in "~/Desktop/animations/img"
I would open Terminal, navigate to the "animations" folder:
And run the spritefy command:
spritefy -s sprite -d img/
It will generate a folder called "sprites" in "~/Desktop/animations/sprites", containing 2 files: sprite.png and sprite.css
To test the animation, just create an HTML file, load the css file into it, and assign a class to an element, where the name of the class is the name of the [sprite]-animation, eg:
If you want to compress the css file generated to optimize file size, run the command with the -c option, eg:
spritefy -s sprite -d img/ -c
To have more control of the animation, you could use the jQuery plugin Spritefy-Animation