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.Chrome
The demo doesn't work as it should in Chrome and there were two main problems with this demo. Thetransition 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
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 thebox-shadow property doesn't seem to take.