Tim Pietrusky

Knight Rider ♥ K.I.T.T.

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 css-tricks.com with the title Restart CSS Animation

css-tricks.com/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);
element.before(clone_warrior);
$("." + 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;
    
    audio.play();
});

Result

codepen.io/TimPietrusky/pen/ADwqK

Thanks goes to

Chris Coyier

His JS-TRICK to reset an CSS3 animation @css-tricks.com was a trick for me.
css-tricks.com/restart-css-animation

Lea Verou

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