In a lit­tle exper­i­ment I’m work­ing on I recent­ly found a bit of a show-stop­ping prob­lem. After an APB on Twit­ter I got a rapid reply which helped me solve it, but it seems that I may be the first per­son to encounter this error, there­fore it’s encum­bent on me to doc­u­ment it. So this is that.

Read the full article

For no par­tic­u­lar rea­son oth­er than idle curios­i­ty, I made a demo of a bro­ken neon sign, using CSS Ani­ma­tions (you’ll need Fire­fox 5, Safari or Chrome to see it). It does­n’t degrade well at the moment, the root cause of which is down to what I think is a bug in Fire­fox’s imple­men­ta­tion — I’ll need to con­firm that.

One quick learn­ing from mak­ing this: it would be real­ly use­ful to have CSS Mix­ins when using a lot of repet­i­tive keyframes, as I do in this ani­ma­tion. The W3C seem to be quite against them, however.

Sup­port for the CSS Tran­si­tions mod­ule, orig­i­nal­ly pro­posed and imple­ment­ed by the WebKit team, has just land­ed in the night­ly builds of Fire­fox; 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 fea­ture in 3.7 at least.

The exper­i­men­tal fea­ture will use the pro­pri­etary ‑moz- pre­fix; I’ve updat­ed the demos in my pre­vi­ous post, Ani­me with CSS and WebKit, to reflect this.

After per­form­ing some brief tests there seem to be a few prob­lems with the imple­men­ta­tion; it’s not as smooth as it could be, and the third demo does­n’t work as it should. Update: Found an issue with the brows­er not recog­nis­ing a val­ue with­out a unit (e.g. 0 instead of 0%); fixed the demo, and filed a bug.

Recent­ly I’ve been think­ing about Webkit’s CSS Ani­ma­tion mod­ule, and play­ing The World Ends With You on the Nin­ten­do DS. TWEWY is a JRPG with lots of sim­ple Ani­me-style cutscenes, and it occurred to me that they must be quite easy to recre­ate using CSS Ani­ma­tion; so, I have.

Read the full article