Knight Rider ♥ K.I.T.T.

August 1st, 2012

My version of the awesome K.I.T.T. scanner light from the series Knight Rider.

Just some CSS3 and HTML5 audio (+SVG for the playback-button). So I will only show you how to keep everything in sync.

Synchronization: CSS3 animation & HTML5 audio

When I want to sync the animation with the audio, I need to

  • reset the CSS3 animation with JavaScript
  • reset the audio if "play" is clicked

Reset: CSS3 animation

Google: "css animation reset"
First hit is with the title Restart CSS Animation

This is exactly what I want. It will clone my .knight-rider parent element, place it after the active element and remove the active element from the page. And you need jQuery to use this snippet.

var element = $(".knight-rider"),
clone_warrior = element.clone(true);
$("." + el.attr("class") + ":last").remove();

What's happening? If you clone the element and add it to the DOM, it's CSS3 animation is called the first time (because the element is an animation-virgin).

Reset: HTML5 audio

The only thing to do is to set the current time to the beginning:

$("button").click(function() {

    // "Reset CSS3 animation" code goes here
    var audio = $("audio").get(0);
    // Reset time
    audio.currentTime = 0;;


Thanks goes to

Chris Coyier

His JS-TRICK to reset an CSS3 animation was a trick for me.

Lea Verou

She invented the next gen syntax highlight library shit: prismjs (which is used on my website)