Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.


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?


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.