I don't know about you but pretty much every live site I've been involved in has used some non-intuitive CSS and markup to achieve the intended result. CSS is great for its intended use of styling marked up text documents; as soon as you try to do anything that falls outside of that zone, such as implementing a contemporary website layout & design, you end up working
against the language. It works, but it's a lot like inferring that Brainfuck must be a good programming language because it's Turing complete.
Yes, we have SVG, canvas, etc., but they aren't supported widely enough. Even if you ignore that and focus on the browsers with the best (X)HTML+SVG support, do the layout & design using SVG and the typesetting with HTML/CSS, the resulting markup and CSS aren't pretty at all - again, SVG is good for vector art, not laying out interactive pages.
Canvas is generic enough to do pretty much anything, but it's very low level. It's like the X server - you still need all the toolkit infrastructure on top to get anything done in most cases. This is fine for animations, games, etc. of course.
So yes, this particular animation could have been better implemented using SVG or canvas. Sure, it's interesting doing it with CSS3, but the sad thing is that it's more than that: the weird hacks required aren't far removed from the ones you need to use in practice, because the 'right' way you mention currently doesn't exist for the vast majority of what we do on the web.
It's more than a cool hack - it's a demonstration (intentional or not) that it's 2010 and we're still fighting our presentation languages.