A Busted Neon Sign with CSS Animations

Warning This article was written over six months ago, and may contain outdated information.

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.

3 comments on
“A Busted Neon Sign with CSS Animations”

  1. Brother, that’s why I can’t wait for you get a taste of Sass mixins and shared Sass libraries! This is available now. We’ll have to sync up sometime so I can show you a few tricks :)

    Adam Stacoviak [October 7th, 2011, 22:15]

  2. You should look at LESS http://lesscss.org/ you can do mixins and a whole lot more.

    John Isaacks [December 21st, 2011, 17:02]

  3. Stunning! I was thinking about something very similar just recently. Thanks for sharing.

    Chris [January 17th, 2012, 10:34]