Animation timeline mockup

dabblet.css

/*
 * Animation timeline mockup
 */

#timeline {
	background: #f9f9f9;
	font: normal 14px/18px Consolas, Courier New, Courier, monospace;
	
	height: 200px;

	position: fixed;
	top: 0;
	left: 0;
	right: 0;
}

#timeline table {
	cell-spacing: 0;
	border-collapse: collapse;
	table-layout: fixed;
	
	height: 100%;
	min-width: 100%;
}

#timeline table thead th {
	color: #666;
	text-align: left;
	text-indent: -5px;
}

#timeline table thead th:nth-child(2) {
}

#timeline table thead td, #timeline table tbody th {
	min-width: 100px;
}

#timeline table tr {
	border-bottom: 1px solid #ccc;
}

#timeline table tbody th {
	background: #eee;
	border-right: 1px solid #ccc;
	box-shadow:
		inset 1px 1px 3px rgba(255,255,255,.9),
		inset 0 -1px 1px rgba(0,0,0,.1);

	font: bold 16px/20px Consolas, Courier New, Courier, monospace;
	text-align: right;
	
	padding: 5px 10px;
}

#timeline table tbody td {
	background: #fff;
	border-right: 1px solid #ccc;
	min-width: 150px;
}

#timeline table tbody td:nth-child(2) {
	border-left: 12px solid #ccc;
}

#timeline table tbody td:nth-child(odd) {
	background: #f3f9ff;
}

#timeline table .animation-container {
	height: 100%;
	padding: 0 11px;
	width: 100%;

	position: relative;
	left: -12px;
}

#timeline table .animation {
	background: #9cf;
	border: 2px solid #9cf;
	
	border-radius: 10px;
	height: 20px;
	margin: -10px 0 0;
	padding: 0;
	position: absolute;
	top: 50%;
	
	transition: background .3s, box-shadow .3s;
}

#timeline table .animation:hover {
	background: #5ae;
	box-shadow:
		inset 1px 1px 0px rgba(0,0,0,.1),
		1px 1px 0px rgba(255,255,255,.8);
}

#timeline table .animation ul {
	padding: 0;
	margin: 0;
	position: absolute;
	left: 0;
	right: 20px;
}

#timeline table .animation li {
	background: #28f;
	border-radius: 10px;

	height: 20px;
	width: 20px;
	
	list-style: none;
	margin: 0;
	padding: 0;
	position: absolute;
	text-indent: -9999em;
	transition: .3s box-shadow;
}

#timeline table .animation li:hover {
	box-shadow: 1px 1px 2px rgba(0,0,0,.1);
}

/*#timeline table .animation:after {
	content: '';
	background: element(#a1);
	display: block;
	height: 100%;
	width: 100%;
	left: 100%;
	position: relative;
}*/

#timeline table .animation h2, #timeline table .animation p {
	position: absolute;
	visibility: hidden;
}


@keyframes tracker {
	0% {
		
	}
}

dabblet.html

<nav id="timeline">
	<table>
		<caption>
			<button>Skip to start</button>
			<button>Play</button>
			<button>Skip to end</button>
			<progress id="tracker" value="0"></progress>
		</caption>
		<thead>
			<tr>
				<td>
				<th>0
				<th>0.5
				<th>1
				<th>1.5
				<th>2
		<tbody>
			<tr>
				<th>el#id
				<td>
					<div class="animation-container">
						<div class="animation" id="a1" style="left:0%;width:140%;">
							<h2>animation-1</h2>
							<p><time>0s</time>&ndash;<time>0.7s</time>
							<ul>
								<li style="left:0%">0%
								<li style="left:100%">100%
							</ul>
						</div>
					</div>
				<td>
				<td>
				<td>
				<td>
				
			<tr>
				<th>el#id
				<td>
					<div class="animation-container">
						<div class="animation" id="a1" style="left:0%;width:100%;">
							<h2>animation-2</h2>
							<p><time>0s</time>&ndash;<time>0.5s</time>
							<ul>
								<li style="left:0%">0%
								<li style="left:100%">100%
							</ul>
						</div>
					</div>
				<td>
				<td>
				<td>
				<td>
	</table>
</nav>

settings.json

{"view":"split","fontsize":"80","seethrough":"","prefixfree":"1","page":"all"}