Skip to content
Branch: master
Go to file
Code

Latest commit

Files

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

README.md

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.

About

Goofy CSS shit

Resources

Releases

No releases published
You can’t perform that action at this time.