It’s Friday night, so not a big one tonight.
I thought I would have a quick play with CSS transitions, and nothing seemed a better demonstration than a seesaw.
Here it is (warning: this only works in Webkit browsers at the time of writing):
This little animation uses two transitions: one to tip the seesaw back and forth, and the other to roll the ball from one end to the other. There were only two slightly complex matters here: I needed to brush up on my A-level trig to get all the distances right, and a little sleight of hand was in order to create the triangular pivot (fire up Firebug if you want to see how I did it).
There are a few small bugs: poor aliasing, and a ghost top border on the seesaw element, but they can wait for another day.
And now, goodnight!