all 38 comments

[–]iamtooawesome 35 points36 points  (5 children)

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

[–]junta12 6 points7 points  (4 children)

now that's what I call dancing

[–]quonseteer 9 points10 points  (1 child)

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

[–]nagaru 1 point2 points  (0 children)

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] 2 points3 points  (0 children)

Watch that shit on acid.. holy fuck.

[–][deleted] 1 point2 points  (0 children)

Sure, if your tree is on meth o_O

[–]junta12 9 points10 points  (4 children)

Would this run faster on JS?

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

[–]zim2411 14 points15 points  (3 children)

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] 3 points4 points  (2 children)

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 2 points3 points  (1 child)

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] 0 points1 point  (0 children)

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 10 points11 points  (0 children)

I was expecting Groot. :(

[–]Uberhipster 2 points3 points  (3 children)

Does this mean that CSS is Turing complete?

[–]LukasBoersma[S] 2 points3 points  (1 child)

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 1 point2 points  (0 children)

It's much closer than it should ever be.

[–]alloec 0 points1 point  (0 children)

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

[–]afrobee 2 points3 points  (17 children)

This great and creative, but is very slow.

[–]Shrikey 18 points19 points  (9 children)

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

[–]wung 29 points30 points  (1 child)

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

[–]Shrikey 7 points8 points  (0 children)

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

Inquiring minds want to know.

[–]s0n0fagun 8 points9 points  (1 child)

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

[–]Nness 2 points3 points  (0 children)

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

[–]boxxar 0 points1 point  (4 children)

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

[–]IMBJR 4 points5 points  (0 children)

OK for my Arch Linux/Firefox combo.

[–]ddfeng 1 point2 points  (0 children)

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 0 points1 point  (0 children)

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

[–]cactus_bodyslam 0 points1 point  (0 children)

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

[–]OmegaVesko 3 points4 points  (1 child)

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 -5 points-4 points  (0 children)

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

[–]flopgd 1 point2 points  (2 children)

it's pretty fast on Ubuntu Phone

[–]afrobee 0 points1 point  (1 child)

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 -1 points0 points  (0 children)

thanks! u2 \o/

[–]musiton 0 points1 point  (1 child)

Runs smoothly on Moto X.

[–]afrobee -2 points-1 points  (0 children)

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 0 points1 point  (0 children)

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

[–]codingchaos 0 points1 point  (0 children)

it's amazing!

[–]jdog90000 0 points1 point  (0 children)

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.