In a little experiment I’m working on I recently found a bit of a show-stopping problem. After an APB on Twitter I got a rapid reply which helped me solve it, but it seems that I may be the first person to encounter this error, therefore it’s encumbent on me to document it. So this is that.
For no particular reason other than idle curiosity, I made a demo of a broken neon sign, using CSS Animations (you’ll need Firefox 5, Safari or Chrome to see it). It doesn’t degrade well at the moment, the root cause of which is down to what I think is a bug in Firefox’s implementation — I’ll need to confirm that.
One quick learning from making this: it would be really useful to have CSS Mixins when using a lot of repetitive keyframes, as I do in this animation. The W3C seem to be quite against them, however.
Support for the CSS Transitions module, originally proposed and implemented by the WebKit team, has just landed in the nightly builds of Firefox; it’s unsure whether this will make it into 3.6, as this is due to be released in the near future, but should be a feature in 3.7 at least.
The experimental feature will use the proprietary ‑moz- prefix; I’ve updated the demos in my previous post, Anime with CSS and WebKit, to reflect this.
After performing some brief tests there seem to be a few problems with the implementation; it’s not as smooth as it could be, and the third demo doesn’t work as it should. Update: Found an issue with the browser not recognising a value without a unit (e.g. 0 instead of 0%); fixed the demo, and filed a bug.
Recently I’ve been thinking about Webkit’s CSS Animation module, and playing The World Ends With You on the Nintendo DS. TWEWY is a JRPG with lots of simple Anime-style cutscenes, and it occurred to me that they must be quite easy to recreate using CSS Animation; so, I have.