Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 

CSS Animated Sprites

Animating sprite sheets using CSS keyframe animations. It's kinda dumb.

Look at it: http://lab.tylergaw.com/css-animated-sprites

What is going on?

Each example is a single image that contains "frames" of each step in the animation. CSS keyframes are then created to change the background position to advance to the next frame. By creating very fast keyframes like "5.0001" the tween from one frame to the next is not seen. The named animations are then applied to the elements and told to repeat infinitely. The speed of the animation is controlled by the duration property. -webkit-animation: horse 0.8s infinite;

Why did I do this?

I was on Reddit in bed at about 1:30am. I saw this http://www.reddit.com/r/programming/comments/jns94/spinjs_a_pure_js_spinner/c2dojw9, thought, "I think I could do that with CSS". Hopped out of bed, found this http://stackoverflow.com/questions/4503195/css3-sprite-animation-without-tweening. Then worked till 4:30am making this goofy, goofy thing just for fun.

Is it practical?

No

Could this be used in a more practical way?

I think so, I haven't thought of anything yet, but I really think so.

Can you do some crazy effects with animating background images with CSS?

Yes, you should give it a try.

Releases

No releases published

Packages

No packages published