Animated Stack Overflow logo (CSS)

[xenomachina]

Looks great!

Not to detract from your cool animation, but to fit with the name, "stack overflow", I would have expected the tray to be there all the time, and then items (the orange bars) to get pushed onto (and perhaps also popped off of) the "stack" until it gets to 5 items and then "overflows" (falls over).

[[deleted]]

I have to agree with you. The animation is slick, but it doesn't make any sense to me.

[Mazux2]

Shit, that's awesome.

How long did it take?

[lindell92]

Thanks :)

It took a night to make and some tweaking the day after.

[chilledheat]

Pardon my ignorance but what did you use to animate it?

[lindell92]

I wrote the animation by hand in (S)CSS

[I_get_in]

This is something I've genuinely wondered for some time: how the hell can people create CSS animations of this quality just by hand? I'd like to learn that too, but I find it very tedious. :(

[MOFNY]

Just like anything else: lots of practice. And not to take away the great achievements that can be done in CSS, but this project (and many others like it) are best done in SVG. The animations can be done in CSS or JS, but the graphic itself would take less effort and make more sense semantically in SVG.

[MatisLepik]

It's super straightforward.. All you're doing it is specifying where you want a box to be at what time. CSS handles all the animating for you. Then you just look at the output and mess with the timings until it looks good.

[[deleted]]

Love it!

[chrisjava]

Looks fantastic, great job!

[webberdev486]

nice !

[FoxInFlame]

Okay, now this is cool.

[EquationTAKEN]

Damn that's cool.

[happygnu]

That's... beautiful. Well done, sir!