
Pure CSS3 dancing Bender - syswsi
http://liveweave.com/GoGhKy
======
liamondrop
Not to detract from the creativity here, but the id attribute specifies its
element's _unique_ identifier[1]. Strictly speaking, this should never happen:

    
    
      <div id="b7">
        <div id="b71">
          <div id="b71">
            <div id="b71">
              <div id="b71">
                ...
    

[1] [http://www.w3.org/TR/2013/WD-html51-20130528/dom.html#the-
id...](http://www.w3.org/TR/2013/WD-html51-20130528/dom.html#the-id-attribute)

~~~
themodelplumber
Yeah, not sure why it's not throwing a bunch of jQuery errors in the console

~~~
dspillett
I don't think any Javascript is in use at all here, but if it were I would not
expect errors but instead simply unexpected behaviour as browsers tend to just
try do _something_ if what you are asking isn't clear (for instance if a
jquery selector returns nothing, any changes you chain after the call just
apply to that nothing instead of complaining that they expect to have some
nodes to act on).

Multiple elements with the same ID is wrong of course, so you can't guarantee
what will happen if you use and ID based selector: three equally (in)correct
interpretations would be "act on the first element you find with that ID",
"act on all elements with that ID", and "error because we don't expect to find
more than one". By breaking the standard you are exposing yourself to
_undefined_ behaviour - the browser can do what it likes and each environment
might do something different.

------
apaprocki
This is nuts -- but sadly dancing Bender is not too practical. (Unless the
dancing trend catches on and GitHub releases the dancing Octocat to
production...)

For more practical CSS madness, I'd recommend Ana Tudor's creations[1]. She
had a cool talk at CSSConf.eu about the math behind building some of her CSS
creations.[2]

[1]:
[http://codepen.io/thebabydino/public/](http://codepen.io/thebabydino/public/)

[2]:
[http://www.youtube.com/watch?v=w9HeWBH_kvg](http://www.youtube.com/watch?v=w9HeWBH_kvg)

~~~
Tyrant505
Great additions but again read my post.

~~~
apaprocki
Yeah, I don't want to be critical -- just wanted to point to some other lower-
level shapes that might be easier for others to learn from and build upon.
100% believe we need more dancing characters, not less.

~~~
anigbrowl
It looks like you're designing a user interface. Would you like some help with
that?

~~~
acomjean
Lets not go back to having animated office supplies offering us advice.

That was best left in that last century...

For the young ones:
[http://en.wikipedia.org/wiki/Office_Assistant](http://en.wikipedia.org/wiki/Office_Assistant)

------
lele0108
Pure CSS horse:
[http://codepen.io/anon/pen/tvaio](http://codepen.io/anon/pen/tvaio)

~~~
ars
There's nothing CSS about it. It's simply an image.

~~~
duiker101
That's the joke.

------
lubujackson
How does.. I don't even...

Is there some tool they used to make this? Because my human brain can't
imagine how this came to exist.

~~~
aegiso
Looks like pretty clean handmade CSS.

I don't see any magic here. Modern CSS3 lets you build arbitrary geometry with
arbitrary animations if you're crazy enough.

What I do see here is an excellent grasp of Cartesian geometry and some
serious dedication. Which I suppose is no less magical.

------
null_ptr
The legs slide horizontally off Bender's ass on Firefox 24 on Linux :-(
Nevertheless, great work!

~~~
camkego
Works on iOS 7 Safari and Chrome for me, but not IE10.

It seems to bring into question the practicality of multi-browser support of
these complex 'apps' utilizing fancy CSS and HTML5.

~~~
girvo
A lot of the neat features used in demo's like this (although I haven't
checked this ones code specifically yet) often rely on prefixed features and
the like; it's more for showing what _could_ be, rather than what _is_ per se.

------
Tyrant505
For those of you who are bound to ask the point, this is pure hacking. You are
given a technology and you produce a result, sometimes for the fun of it!
Thanks for this! I learned a bit.

------
digitailor
I love when people see the potential to use HTML structure as a makeshift DAG.
Similarly, once the DOM got fully grokked in the mid-2000s, it was if the web
changed overnight. From flat documents to a flexible graph. And to do this
without JS? We're talking no actual imperative code here, just dead structure
and presentation markup.

This is one of the first CSS animations I've seen that works flawlessly for
me, at least on the iPhone. I also noticed the non-unique ID attrs as is noted
below, but let's be real. With that amount of CSS to conceive of and write,
would you really glance twice at the twenty lines of HTML you're using as a
fly-by-night DAG? For a non-commercial passion project? The creator of this
was in the ZONE!

The pure insanity makes me grin and long for the pre-teen days where there was
time for this. All the ANSI art, the HyperCard stacks, the strange games made
using dirt-cheap language implementations. Sigh, but a nice sigh. Also makes
me damn grateful for open source and standards.

------
arbutus
This is really neat. I'm really interested in seeing how all these new fancy
CSS3/HTML5 features shape the evolution of casual online games. Back in the
day it was either static images, like the Neopets sort of thing (which are
still pretty common with young kids I think - Webkinz is a cash cow and that
site looks straight out of my childhood), or slow awful Flash games that
usually didn't have any data persistence. Even if this Bender example is kind
of hacky as other comments are indicating, the possibilities still seem pretty
limitless.

~~~
sillysaurus2
For an example of one modern JS game, see
[http://www.bombermine.com](http://www.bombermine.com)

I'm not aware of any games that use CSS3 for the ingame graphics, though.

------
blt
It seems like we should be seeing heavy duty graphical editors that output
CSS3 animations. Any tools exist yet?

~~~
cli_shall
Well, there's this:
[http://www.sencha.com/products/animator/](http://www.sencha.com/products/animator/)

Never used it.

------
ck2
I can't believe this show is off the air. Again. Forever. :-(

Anyways, I hope ad people don't catch on to how CSS is a bit harder to block
than JS.

------
larkinrichards
Try zooming in your web browser for a ghostly -- some might say spooky --
disembodied bender.

Just in time for halloween.

------
BinaryBullet
Unfortunately Bandcamp's embed doesn't seem to be working in Firefox/liveweave
for me, but here's a theme song added:

[http://liveweave.com/bhu7HB](http://liveweave.com/bhu7HB)

------
sown
neat!

I've gotten into CSS3 and JS recently but I'm not sure how this works.

Can someone explain to this old C dog the principles of how it works, though?
I thought this would require JS to work?

I apologize in advance for being out of touch. :(

~~~
lcnmrn
You set up your elements in HTML, then do the keyframes and reposition the
elements in CSS.

I did this:
[http://lucianmarin.com/peculiar/](http://lucianmarin.com/peculiar/)

------
dreen
After a while the legs and to some degree arms go out of sync with the rest
[http://i.imgur.com/EMGqXA3.png](http://i.imgur.com/EMGqXA3.png)

------
kaoD
Several <div>s with the same id... heresy!

------
moreentropy
Made my day. I need this for my 404 pages.

Is anything known about the author or license of this work? Will Comedy
Central likely object?

------
yngccc
remind me of CSS 3D teapot.

[http://yow.eventer.com/yow-2012-1012/the-story-of-the-
teapot...](http://yow.eventer.com/yow-2012-1012/the-story-of-the-teapot-in-
html-by-brian-beckman-and-erik-meijer-1266)

------
ciriarte
Lovely, congratulations. This kind of thing inspires me to learn more and
more!

------
pouzy
This must be what CSS3 has been invented for. I can die in peace now.

------
northband
Looks awesome while listening to Another Brick In The Wall Pt.2

------
mustapha
Always find myself stunned by the capabilities of CSS.

------
mattkrea
What people can do in CSS3 blows my mind. I love this!

------
kfury
The real Bender's eyes have square pupils.

------
smaili
Hacker's equivalent of animated gif :)

------
J_Darnley
I call bullshit on the "pure css" part. Nothing works if you have javascript
turned off.

~~~
TranceMan
It's actually liveweave which doesn't work with javascript turned off.

This works if you don't have javascript on:
[http://fiddle.jshell.net/w5GFR/show/light/](http://fiddle.jshell.net/w5GFR/show/light/)

------
pvnick
Impressive! Great job.

------
filipedeschamps
Just WOW. Good job.

------
AtTheLast
Ha. This is great!

------
browserspot
holy mother of god! this is absolutely awesome!

------
deadsnake
Guess CSS is basically a Turing complete language.

------
xer0x
boom!

