Play with web technologies

Behold the CSS Lightsaber

July 22, 2011
Attention: This article is old and the content is outdated. I've left the article here for historical purposes.
Behold the CSS Lightsaber

Note: Check out the demo before reading. I've been working on CSS lightsabers lately. I remember seeing one a while back and liking the concept, however I thought it could be greatly improved. I've also been itching to create animation out of CSS transitions. By "animation" I mean one event followed by another event. Transitions can mimic full blown animation by transitioning multiple elements at the same time with different delays. This gives the effect of an element being animated. Very simply they all occur simultaneously, but the initial delay make the events appear to follow each other.

The sabers were both very carefully crafted with CSS alone. With Yoda's saber I focused on having different options. Switch on, increase power and increase length. It was a bit of a work around to get the options to work with each other since only one transition can occur on an element at any given time. This would mean that in order to keep the Saber on, decrease power and decrease length is == to power up.

I'm pretty sure people will mention that some of this could be done with the CSS keyframe animations. Yes, it can and should, however, I started this a couple of weeks back (Firefox5 was only released yesterday with support for the CSS property) and I don't really like working in Webkit.

Firefox loves lightsabers

This demo looks best in Firefox by far. Everything is rendered absolutely perfectly. In other browsers? Not so much.


The demo doesn't work as it should in Chrome and there were two main problems with this demo. The transition can be applied to pseudo elements. I started of animating pseudo elements all over the place, but I stopped because I wanted Webkit to at least partially support the demo. Also, Webkit doesn't seem to handle transitions very well yet. Have a look yourself. Go to the demo: Click on "Higher", then on "Longer". It refuses to do the transition. It seems like Webkit has a problem when going from one transition into another. In order to get it to work you have to use a transition, clear it and then fire off another transition. In comparison to Firefox, the shadows look a bit... Hard.


Opera has a different set of issues. It animates (along with a few rendering bugs here and there) from transition to transition, however, a transition on the box-shadow property doesn't seem to take.


I haven't tested this yet. If you have IE10 and you test it, let me know what the problems were.

That's about it

This took me a fair amount of time to complete and iron out the major bugs. Let me know if you have any questions and what you think.