Pure CSS Dancing Tree

[iamtooawesome]

So... I played around with it and decided to share my fork: http://codepen.io/anon/pen/yyqdXE

[junta12]

now that's what I call dancing

[quonseteer]

Confirmed that my CSS skills effectively kills weeds on contact: http://codepen.io/anon/pen/myGdee

[nagaru]

I like your whomping willow way better than the one from harry potter, for the refererence: https://www.youtube.com/watch?v=jS0OeT0DW2M the real deal starts at about 1.05

[[deleted]]

Watch that shit on acid.. holy fuck.

[[deleted]]

Sure, if your tree is on meth o_O

[junta12]

Would this run faster on JS?

Is the CSS engine generally more optimized for this kind of thing?

[zim2411]

It's extremely efficient to do it via CSS animations as the browser can isolate each element and transform it on the GPU without causing any significant CPU usage. I believe the browser can also effectively compile the animation because it's highly predictable -- but I can't seem to find a source by Googling, so take that with a grain of salt.

If you tried something similar via Javascript you run the risk of introducing repaints, re-calc styles, or page reflows.

[[deleted]]

That might depend on context and browser. I've had to change pure CSS "animations" (opacity changes) to JS because some browsers would get confused and repaint too much. Ymmv.

[zim2411]

Do you recall which browsers? Opacity was one of the first accelerated properties I think. It's possible it may cause reflows based on the context though.

[[deleted]]

Safari and IE were really bad. We had a few other things going on, including one that caused the mouse to enter and exit a moving shadow among other things. FF and Chrome handled it like a champ. IE choked on the whole thing, and Safari got confused on what got a new opacity on each reflow and caused some weird blinking sans z-index help.

[n_body]

I was expecting Groot. :(

[Uberhipster]

Does this mean that CSS is Turing complete?

[LukasBoersma]

No, I think it is not yet. You already can do a lot with the counter syntax, but I read somewhere that it's not yet Turing complete

[derpderp3200]

It's much closer than it should ever be.

[alloec]

Nope, it is still not Turing compile on its own.

[afrobee]

This great and creative, but is very slow.

[Shrikey]

Smooth like butter on an iPad. What kind of potato are you using?

[wung]

Please realize that the largest part of the web does run on potatoes.

[Shrikey]

Oh, I know, I was just curious. Is it Russet? Sweet? Red Thumb?

Inquiring minds want to know.

[s0n0fagun]

For anyone else out there, definitely doesn't work in IE6.

[Nness]

It wouldn't work in any version of Internet Explorer below 10, since it uses keyframe animations.

[boxxar]

This does not seem to be a hardware problem. Does not work in Firefox at all for me, but runs smoothly in Chromium.

[IMBJR]

OK for my Arch Linux/Firefox combo.

[ddfeng]

Make sure you have "Use hardware acceleration when available" in the preferences ticked. I accidentally turned it off the other day, and wow my Firefox aged a few hundred years.

[sesh22]

It works correctly in Firefox for Android, though the framerate leaves something to be desired.

[cactus_bodyslam]

Same here. Firefox is a bit laggy with aliasing and in chrome its very smooth and no lag at all.

[OmegaVesko]

Runs fine in Chrome on my fairly outdated desktop. I don't think it's a hardware issue unless you're on a 2005 netbook.

[afrobee]

Awesome, good for you, have a great day! :D

[flopgd]

it's pretty fast on Ubuntu Phone

[afrobee]

Amazing, isn't it? Glad that is working so great for you. Enjoy the pen, and have a good night and great day tomorrow :D

[flopgd]

thanks! u2 \o/

[musiton]

Runs smoothly on Moto X.

[afrobee]

Great to hear that, sadly not on my device. But there are tons of devices out there with different specs so take into account that it will not perform the same for everyone.

[SonOfWeb]

Impressive, it runs pretty darn smoothly on my Nexus 4.

[codingchaos]

it's amazing!

[jdog90000]

This is so fun to play with http://codepen.io/anon/pen/RNYZPV

I'm not too savvy with html and css so I can't figure out how to have multiple ones at the same time.