cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmlicon-personicon-teamoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <ul class="knight-rider">
  <li>
    <span class="led"></span>
  </li>
  <li>
    <span class="led"></span>
  </li>
  <li>
    <span class="led"></span>
  </li>
  <li>
    <span class="led"></span>
  </li>
  <li>
    <span class="led"></span>
  </li>
  <li>
    <span class="led"></span>
  </li>
  <li>
    <span class="led"></span>
  </li>
  <div class="window"></div>
  <div class="slider"></div>
</ul>

<!-- Knight Rider - K.I.T.T. sound -->
<audio preload></audio>

<div id="player">
  <svg role="paused" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" version="1.0" id="layer1" width="40px" height="40px" viewBox="0 0 75 75">
  <g><polygon
     points="39.389,13.769 22.235,28.606 6,28.606 6,47.699 21.989,47.699 39.389,62.75 39.389,13.769"
     style="stroke:#fff;stroke-width:5;stroke-linejoin:round;fill:#fff;" />
  <path
     d="M 48.651772,50.269646 69.395223,25.971024"
     style="fill:none;stroke:#fff;stroke-width:5;stroke-linecap:round"
     inkscape:connector-curvature="0"
     sodipodi:nodetypes="cc" />
  <path
     d="M 69.395223,50.269646 48.651772,25.971024"
     style="fill:none;stroke:#fff;stroke-width:5;stroke-linecap:round"
     inkscape:connector-curvature="0"
     sodipodi:nodetypes="cc" />
  </g>
  </svg>
  
  <svg role="playing" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://web.resource.org/cc/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" version="1.0" width="40px" height="40px" viewBox="0 0 75 75">
    <g>
      <polygon
points="39.389,13.769 22.235,28.606 6,28.606 6,47.699 21.989,47.699 39.389,62.75 39.389,13.769" style="stroke:#fff;stroke-width:5;stroke-linejoin:round;fill:#fff;"
/>
    <path 
      	d="M 48.128,49.03 C 50.057,45.934 51.19,42.291 51.19,38.377 C 51.19,34.399 50.026,30.703 48.043,27.577" style="fill:none;stroke:#fff;stroke-width:5;stroke-linecap:round"/>
		<path 
			d="M 55.082,20.537 C 58.777,25.523 60.966,31.694 60.966,38.377 C 60.966,44.998 58.815,51.115 55.178,56.076" style="fill:none;stroke:#fff;stroke-width:5;stroke-linecap:round"/>

    <path 
			d="M 61.71,62.611 C 66.977,55.945 70.128,47.531 70.128,38.378 C 70.128,29.161 66.936,20.696 61.609,14.01"
			style="fill:none;stroke:#fff;stroke-width:5;stroke-linecap:round"/>
		</g>
	</svg>
</div>
            
          
!
            
              * {
  box-sizing: border-box;
}

body {
  background: #111
}

ul {
  position:relative;
  width:800px;
  margin:40px auto;
  height:100px;
  overflow:hidden;
  list-style:none;
  padding:0;
  box-shadow: 
    0 0 50px rgba(60, 60, 60, .5),
    0 0 80px rgba(0, 0, 0, .8)
  ;
}

ul:before,
ul:after {
  position:absolute;
  top:-115px;
  left:-25%;
  z-index:1337;
  content:'';
  width:150%;
  height:130px;
  background:rgb(20, 20, 20);
  box-shadow:
    0 5px 15px rgba(0, 0, 0, .4),
    inset 0 0 2px rgba(90, 90, 90, .3)
  ;
}

ul:after {
  top:auto;
  bottom:-115px;
  border-radius:100%;
  box-shadow:0 -5px 15px rgba(0, 0, 0, .4);
}

li {
  position:relative;
  float:left;
  height:100%;
  width:14%;
  background: rgba(60, 0, 0, .5);
  background-image: linear-gradient(left,  rgba(0,0,0,0.9) 0%,rgba(0,0,0,0.4) 4%,rgba(0,0,0,0) 50%,rgba(0,0,0,0.4) 96%,rgba(0,0,0,0.9) 100%);

}

li:nth-child(4) {
  width:16%;
}

@sound_length: 1.128s;
@animation_duration: @sound_length * 2;

@animation_offset_left: -.095s;
@animation_offset_right: -1.223s;

.slider.playing {
	animation-iteration-count: 1;
}

li:nth-child(1) .led.playing,
li:nth-child(2) .led.playing,
li:nth-child(3) .led.playing,
li:nth-child(4) .led.playing{
	animation-iteration-count: 1;
}

li:nth-child(5) .led.playing,
li:nth-child(6) .led.playing,
li:nth-child(7) .led.playing {
	animation-iteration-count: 2;
}

.led {
  position:absolute;
  z-index:0;
  top:50%;
  left:50%;
  margin-top:-10px;
  margin-left:-10px;
  height:20px;
  width:20px;
  opacity:0;
  background:rgba(250, 0, 0, .75);
  box-shadow:
    0 0 20px rgba(0, 0, 0, .7),
    0 0 30px rgba(200, 0, 0, .7),
    0 0 40px rgba(210, 0, 0, .7),
    0 0 50px rgba(220, 0, 0, .7),
    0 0 60px rgba(230, 0, 0, .7),
    0 0 70px rgba(255, 57, 17, .7)
  ;
  border-radius:50%;
  transform:scale(1.8, 1.3);
  animation: led @animation_duration infinite ease-in @animation_offset_left;
  
  -webkit-filter:blur(4px);
  filter:blur(4px);
}

li:nth-child(2) .led {
  animation: led-2 @animation_duration infinite linear @animation_offset_left;
}

li:nth-child(3) .led {
  animation: led-3 @animation_duration infinite linear @animation_offset_left;
}

li:nth-child(4) .led {
  animation: led-4 @animation_duration infinite linear @animation_offset_left;
}

li:nth-child(5) .led {
  animation: led-3 @animation_duration infinite linear @animation_offset_right;
}

li:nth-child(6) .led {
  animation: led-2 @animation_duration infinite linear @animation_offset_right;
}

li:nth-child(7) .led {
  animation: led @animation_duration infinite linear @animation_offset_right;
}

@led_opacity_off: .05;

@keyframes led {
  0%, 5%, 15%, 85%, 95%, 100% {
    opacity: @led_opacity_off;
  }
  10%, 90% {
    opacity:1;
  }
}

@keyframes led-2 {
  0%, 10%, 20%, 80%, 90%, 100% {
    opacity: @led_opacity_off;
  }
  15%, 85% {
    opacity:1;
  }
}

@keyframes led-3 {
  0%, 15%, 25%, 75%, 85%, 100% {
    opacity: @led_opacity_off;
  }
  20%, 80% {
    opacity:1;
  }
}

@keyframes led-4 {
  0%, 20%, 30%, 70%, 80%, 100% {
    opacity: @led_opacity_off;
  }
  25%, 75% {
    opacity:1;
  }
}

.slider {
  position:absolute;
  top:0;
	left:-40%;
  z-index:-1;
  height:100%;
  width:40%;
  background:#c00;
  
  animation: knight-rider @animation_duration infinite linear;
}

@keyframes knight-rider {
  0%, 100% {
    left:-40%;
		background: linear-gradient(left,  rgba(237,14,17,0.1) 0%,rgba(237,14,17,0.8) 20%,rgba(165,9,9,0.2) 80%,rgba(165,9,9,0) 100%);
  }
  50% {
    left: 100%;
		background: linear-gradient(left,  rgba(165,9,9,0) 0%,rgba(165,9,9,0.2) 20%,rgba(237,14,17,0.8) 80%,rgba(237,14,17,0.1) 100%);
  }
}

.window {
  position:absolute;
  top:-60px;
  left:-15%;
  z-index:1;
  width:130%;
  height:115px;
	background: linear-gradient(top,  rgba(255,0,0,0) 60%,rgba(255,0,0,0.05) 100%);
  box-shadow: inset 0 5px 40px rgba(240, 0, 0, .2);
  border-radius:50%;
}

audio {
  display:none;
}

#player {
  position:fixed;
  top:20px;
  right:20px;
  transition:all .3s ease-in;
  opacity:.1;
  cursor:pointer;
}

#player:hover {
  opacity:1;
}

#player svg[role="playing"] {
  display:none;
}
            
          
!
            
              /*
 * Knight Rider ♥ K.I.T.T.
 * 
 * How to sync CSS3 animation with HTML5 audio 
 * timpietrusky.com/knight-rider-loves-kitt
 *
 * 2012 by Tim Pietrusky
 * timpietrusky.com
 * 
 */

var audio = $('audio').get(0),
    _paused = $('svg[role="paused"]'),
    _playing = $('svg[role="playing"]'),
    _count = 0;

// Check audio format support
audio.src = Modernizr.audio.ogg ? 
  'http://timpietrusky.com/cdn/knight_rider_kitt.ogg' : 
  'http://timpietrusky.com/cdn/lab/knight_rider_kitt.mp3';

/*
 * Play
 */
_paused.click(function() {
  $(this).css('display', 'none');
  _playing.css('display', 'block');
	
	// Stop animation after 1 iteration
	$('.slider').addClass('playing');
	$('.led').addClass('playing');
	
	// Reset animation
  resetAnimation();
	
  loop();
});

/*
 * Pause
 */
_playing.click(function() {
  $(this).css('display', 'none');
  _paused.css('display', 'block');
	
	// Infinte animation
	$('.slider').removeClass('playing');
	$('.led').removeClass('playing');
	
	// Reset animation
	resetAnimation();
	
  audio.pause();
});

/*
 * Loop
 */
$("audio").bind('ended', function() {
  loop();
});

/*
 * Loop the animation/sound for ever
 */
function loop() {
  if (_count == 2) {
		resetAnimation();
		_count = 0;
	}
	_count++;
  
  // Reset audio
  audio.currentTime = 0;
  audio.play();
}

/*
 * Reset the animation
 * https://css-tricks.com/restart-css-animation
 */
function resetAnimation() {
  var el = $('.knight-rider'),  
  newone = el.clone(true);
  el.before(newone);     
  $("." + el.attr("class") + ":last").remove();
}
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console