All We Want for Christmas is Our CSS …

You’ve no doubt been following our 2012 SitePoint Christmas Sale  — a winterland-​​themed design extravaganza (desktop version only). Elements on screen that have unfolded day by day have included ice skaters to a dancing bear to leaping fish to a smoking locomotive — and there’s plenty more to come.

Now we’re adding a “Christmas story mode” to this project, for those of you keen to drill down into the story stream..
You can also link directly to specific days by adding “#day/​” and the day number. For instance, this link will take you straight to day 14:

All About the Design

The concept, layout and illustration are the brainchildren (if that’s a thing … yeah, it is!) of Harley Alexander. As he explained in this post, Michael Sauter built our backend. Ian Coleman made it all the bits work together and Jude Aakjaer managed both the team and the project.
The animation was down to me. I love mucking about with animations, and the Christmas sale has been the perfect place to workshop new ideas. No, it won’t work on non-​​current browsers. Yes, it’s also true that some scenes may push your CPU a little.
My challenge was:

1. To rely on pure CSS3 animation, without heavy use of JavaScript
2. To find as many different CSS animation approaches as I could

And I barely had to bend those rules. For instance:
1) The dogsled is positioned with CSS (position:fixed) and uses CSS transitions to move it into place. However, I had to add and subtract a class to make the dogs trot.
2) You’ll also notice the smoke on the train animation on days 5, 6 and 7 detaches from the train as soon as it leaves the smokestack — just like real smoke! I needed a little dash of JavaScript to calculate where the chimney is relative to the track, and then place each new puff of smoke relative to that position on the track — rather than the train.
So really, JavaScript is being used an animation toggle, rather than the animation engine.
If you’re interested in the CSS nitty-​​gritty of this project, join the conversation in our Christmas CSS Podling group. I’ll be hanging around there, answering questions and getting your feedback on what worked best.
I’ll also be writing up some longer animation how-​​to posts in the new year on SitePoint … so keep an eye out for those.
In the meantime, check out each new day and let us know what you think.