Knight Rider animation made with just CSS3

Most of the examples people of CSS3 animations people have made have been interesting but pretty useless and this fits that bill perfectly. But the fact is, they’re fun, a challenge and show what CSS3 is capable of. I was bored the other night and was checking out desktop wallpapers at Simple Desktops when I saw one called Hello Michael. For some reason, I got the idea to make the Knight Rider animation using only CSS3. It took a bit to figure out but it worked. It only works in Webkit browsers and seems to work better in Chrome than Safari.

Check it out here

So how does this work? It uses @-webkit-animation and I just had to figure out the timing. The HTML is nothing but 6 divs with ids of block1 through block6 and the CSS for each div looks like this:

The only thing really interesting there is -webkit-animation and -webkit-animation-iteration-count. In the first one, I’m telling it the name of the animation, the duration and setting the animation to linear. Next, I’m just telling the browser that the animation is to run forever. You can set it to any number.

That’s what the animation for block1 looks like. I’m setting the opacity of the div to 0.5 for most of the two seconds of the animation time with it changing to 1 for 10% of it. Block1 and block6 only go to opacity:1; once where as the other 4 have it set to 1 twice. All of the CSS is in the demo page, so if you want to see how I did everything, check out the source.

As I said early, there’s really nothing useful about this, in fact, I really hope we don’t have to see things like this all over web pages. It would be a scary return to the days of animated gifs everywhere. But the challenge was cool and I think it shows that eventually CSS is going to lessen our reliance on JavaScript.