The Kitt Effect using Efficient CSS Animation

dabblet.css

/**
 * The Kitt Effect using Efficient CSS Animation
 */
 
html, body {
 font:normal 100%/1.5 sans-serif; 
}

.kitt,
.kitt div,
.kitt-pseudo,
.kitt-pseudo::before {
	margin:0;
	padding:0; 
	height:1.2em;
	box-shadow:inset 0 0 .125em #ccc; 
	border-radius:.3em; 
}

.kitt,
.kitt-pseudo {
	min-width:10em;
	margin:0 auto 1em; 
	background-color:#f1f1f1;
}

/* First Method Specifics */
.kitt div {
	width:30%; /* according to its parent container width */
	animation:loading 1s ease-in-out infinite alternate; /* the preferred timing-function is ease-in-out */
	background-color:#0ebdf7;
}

@keyframes loading {  
	to { margin-left:70%; } /* to simulate the bouncing effect */ 
}

/* Second Method Specifics */
.kitt-pseudo::before { 
	content:' '; 
	display:block;
	background-color:#ffc31e; 
	width:20%; /* If you change this value you must adapt the value in the keyframe at-rule loading */
	animation:loading-pseudo 1.2s ease-in-out infinite alternate; /* infinite alternate are a must */
}

@keyframes loading-pseudo {  
	to { margin-left:80%; } /* to simulate the boucing effect */ 
}

dabblet.html

<p>Here's a simple technique to recreate the K2000 effect. 
<strong>The goal is to used the minimum amount of CSS and HTML code</strong>.</p>
<p>To reproduced the bouncing effect we are going to animated an element 
CSS <code>margin</code> property according to its <code>width</code>
 and the <code>width</code> of its container.</p>
 <p>Because we don't want a verbose keyframe at-rule <strong>we'll use an 
 infinite loop and the alternate animation mode</strong>.</p>
 
  <ol>
	<li> 
		<p>The first method uses <strong>2 block elements</strong> and should work 
		in every CSS animation enabled browser :</p>
		<div class="kitt"><div></div></div>
		<p><em>To use this method just copy/paste and adapt, to your taste, 
		the code associated to the element which class attribute is <code>.kitt</code></em></p>
	<li> <p>The second method uses <strong>only 1 block element as well as a pseudo element</strong> 
	but only works in Firefox (prefixed or unprefixed) and Chrome Canary (prefixed) 
	for the moment (I have not tested IE10):</p>
		<div class="kitt-pseudo"></div>
		<p><em>To use this method just copy/paste and adapt, to your taste, 
		the code associated to the element which class attribute is <code>.kitt-pseudo</code></em></p>
</ol>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}