A Pen by o'holloran.

CSS-Timeline.markdown

CSS Timeline

Created this timeline for the company history section of www.meridianapps.com. Uses the LESS CSS framework and some jquery hover/click events.

A Pen by o'holloran on CodePen.

License.

index.html

<div id="history">
  		
			<div id="history_clock">
			
					<div id="clockface"> 
						
						<div id="clockglare"></div>
						<div id="clockarm_1" ></div>
						<div id="clockarm_2"></div>
					
					</div>
			
			</div>
		
			<div id="timeline_track"></div>
			
			<ul id="historic_event_1" class="current">
			
        <li class="historic_dot_wrapper"><div id="historic_dot_1" class="historic_dot"></div></li>
				<li class="historic_year"><p>1985</p></li>
				<li id="historic_text_1"><p>Phil Collins releases "No Jacket Required".</p></li>
			
			</ul>
			
			<ul id="historic_event_2">
        
        <li id="historic_text_2"><p>Sting releases "...Nothing Like the Sun".</p></li>
        <li class="historic_year"><p>1987</p></li>
        <li class="historic_dot_wrapper"><div id="historic_dot_2" class="historic_dot"></div></li>
			
			</ul>
			
			<ul id="historic_event_3">
        
				<li class="historic_dot_wrapper"><div id="historic_dot_3" class="historic_dot"></div></li>
				<li class="historic_year"><p>1989</p></li>
				<li id="historic_text_3"><p>Duran Duran releases "Decade: Greatest Hits".</p></li>
			
			</ul>
			
			<ul id="historic_event_4">
			
				<li id="historic_text_4"><p>Gotye releases a new Sting album</p></li>
				<li class="historic_year"><p>2011</p></li>
        <li class="historic_dot_wrapper"><div id="historic_dot_4" class="historic_dot"></div></li>
			
			</ul>
			
		</div>

script.js

$(document).ready(function() {

     $('.about_nav_content li:first-child a').click(function(){
   	$('#historic_event_1').addClass('current');
   	$('#historic_event_2').removeClass('current');
   	$('#historic_event_3').removeClass('current');
   	$('#historic_event_4').removeClass('current');
   	$('#history_clock').removeClass('animate1 animate2 animate3');
   	});
   	
   	var hoverOrClick = function(){
   		$("#history_clock").removeClass('animate1 animate2 animate3');
   		$('#historic_event_1').addClass('current');
   		$('#historic_event_2, #historic_event_3, #historic_event_4').removeClass('current');
   	}
   	$('#historic_dot_1, #historic_event_1').click(hoverOrClick).hover(hoverOrClick);
   	
   	var hoverOrClick = function(){
    	$('#history_clock').addClass('animate1');
    	$("#history_clock").removeClass('animate2 animate3');
    	$('#historic_event_2').addClass('current');
    	$('#historic_event_1, #historic_event_3, #historic_event_4').removeClass('current');
   	}
   	$('#historic_dot_2, #historic_event_2').click(hoverOrClick).hover(hoverOrClick);
   	
   	var hoverOrClick = function(){
   		$('#history_clock').addClass('animate2');
   		$("#history_clock").removeClass('animate1 animate3');
   		$('#historic_event_3').addClass('current');
   		$('#historic_event_1, #historic_event_2, #historic_event_4').removeClass('current');
   	}
   	$('#historic_dot_3, #historic_event_3').click(hoverOrClick).hover(hoverOrClick);
   	
   	var hoverOrClick = function(){
   		$('#history_clock').addClass('animate3');
   		$("#history_clock").removeClass('animate1 animate2');
   		$('#historic_event_4').addClass('current');
   		$('#historic_event_1, #historic_event_2, #historic_event_3').removeClass('current');
   	}
   	$('#historic_dot_4, #historic_event_4').click(hoverOrClick).hover(hoverOrClick);

});

style.less

//Colors

@color1: #596c7c; //slate
@color2: #d1d8de; //bluish gray
@color3: #e9edf0; //bluish gray
@color4: #f7f9fa; //lighter bluish gray

//Measurements

@eventWidth: 300px;

//Mixins

.border-radius(@radius) {
  	-webkit-border-radius: @radius;
		-moz-border-radius: @radius;
		-o-border-radius: @radius;
		border-radius: @radius;
}

.box-shadow (@shadow1, @shadow2: transparent 0 0 0, @shadow3: transparent 0 0 0, @shadow4: transparent 0 0 0, @shadow5: transparent 0 0 0, @shadow6: transparent 0 0 0) {
		-webkit-box-shadow: @shadow1, @shadow2, @shadow3, @shadow4, @shadow5, @shadow6;
		-moz-box-shadow: @shadow1, @shadow2, @shadow3, @shadow4, @shadow5, @shadow6;
		box-shadow: @shadow1, @shadow2, @shadow3, @shadow4, @shadow5, @shadow6;
}

.2-color-gradient (@colorStart, @colorEnd, @position1: 0%, @position2: 100%, @angle: 90deg, @oldangle1: left top, @oldangle2: right bottom, @iegradtype: 0) {
		background-color: @colorStart; /* Old browsers */
		background-image: -moz-linear-gradient(@angle,  @colorStart @position1, @colorEnd @position2); /*FF3.6+ */
		background-image: -webkit-gradient(@angle, @oldangle1, @oldangle2, color-stop(@position1, @colorStart), color-stop(@position2, @colorEnd)); /*Chrome,Safari4+ */
		background-image: -webkit-linear-gradient(@angle,  @colorStart @position1, @colorEnd @position2); /*Chrome10+,Safari5.1+ */
		background-image: -o-linear-gradient(@angle,  @colorStart @position1, @colorEnd @position2); /* Opera 11.10+ */
		background-image: -ms-linear-gradient(@angle,  @colorStart @position1, @colorEnd @position2); /*IE10+ */
		background-image: linear-gradient(@angle,  @colorStart @position1, @colorEnd @position2); /* W3C */
		filter: ~"progid:DXImageTransform.Microsoft.gradient( startColorstr='@{colorEnd}', endColorstr='@{colorStart}', GradientType='@{iegradtype}' )"; /* IE6-9 */
}

.opacity (@opacity, @ieopacity) {
		opacity: @opacity;
		filter: "alpha(opacity=@{ieopacity})";
  		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=@{ieopacity})";
}

.transition (@transition) {
		-webkit-transition: @transition;
		-moz-transition: @transition;
		-ms-transition: @transition;
		-o-transition: @transition;
}

.transform (@transform) {
		-webkit-transform: @transform;
		-moz-transform: @transform;
		-ms-transform: @transform;
		-o-transform: @transform;
}

.transform-origin (@originx, @originy) {
		-webkit-transform-origin: @originx @originy;
		-moz-transform-origin: @originx @originy;
		-ms-transform-origin: @originx @originy;
		-o-transform-origin: @originx @originy;
}

//CSS

* {
		margin: 0;
		padding: 0;
		list-style: none;
		-webkit-font-smoothing: antialiased;
}

p {
  	color: @color1;
		font-family: helvetica, arial, san-serif;
		font-size: 0.875em;
		font-weight: normal;
		text-shadow: 0 1px #ffffff;
}

#history {
  	display: block;
  	position: relative;
		margin: 50px auto;
  	text-align: center;
}

#timeline_track {
		display: block;
		position: relative;
  	margin: 0 auto;
		width: 6px;
		height: 800px;
		background-color: @color3;
//LESS Mixins
		.border-radius (3px);
		.box-shadow (0 2px 2px rgba(0,0,0,0.25) inset);
}

#historic_event_1, #historic_event_2, #historic_event_3, #historic_event_4 {
		display: table;
		position: absolute;
  	width: @eventWidth;
		cursor: pointer;
		-webkit-tap-highlight-color: rgba(0,0,0,0);
//LESS Mixins
		.opacity (.50, 50);
		.transition (opacity 600ms ease);
}

#historic_event_1:hover, #historic_event_1.current, #historic_event_2:hover, #historic_event_2.current, #historic_event_3:hover, #historic_event_3.current, #historic_event_4:hover, #historic_event_4.current {
//LESS Mixins
		.opacity (1.0, 100);
}

#historic_event_1 {
		top: 100px;
  	left: 50%;
  	margin-left: -@eventWidth*0.04;
}

#historic_event_2 {
		top: 300px;
  	left: 50%;
  	margin-left: -@eventWidth*0.91; 
}

#historic_event_3 {
		top: 500px;
		left: 50%;
  	margin-left: -@eventWidth*0.04;
}

#historic_event_4 {
		top: 700px;
  	left: 50%;
  	margin-left: -@eventWidth*0.91; 
}

.historic_year {
		display: table-cell;
		vertical-align: middle;
  	width: 33%;
  	text-align: center;
}

#historic_text_1, #historic_text_2, #historic_text_3, #historic_text_4 {
		display: table-cell;
		vertical-align: middle;
  	width: 53%;
  	text-align: left;
}

.historic_dot_wrapper {
		display: table-cell;
		vertical-align: middle;
  	width: 13%;
  	text-align: center;
}

.historic_dot {
  	display: block;
  	position: relative;
		width: 14px;
		height: 14px;
  	margin: 0 auto;
		background-color: @color3;
		cursor: pointer;
		z-index: 100;
//LESS Mixins
		.border-radius (100%);
		.box-shadow (0 0 0 1px @color2 inset, 0 2px 0 #ffffff inset, 0 2px 0 @color2);
}

#historic_event_1:hover #historic_dot_1, #historic_event_2:hover #historic_dot_2, #historic_event_3:hover #historic_dot_3, #historic_event_4:hover #historic_dot_4, {
//LESS Mixin
		.transform (scale(1.15) translate3d(0,0,0));
}

#historic_dot_1, #historic_dot_2, #historic_dot_3, #historic_dot_4 {
		display: block;
		position: relative;
  	margin: 0 auto;
  	left: -7px;
}

#history_clock {
		display: block;
		position: absolute;
		top: 100px;
		left: 50%;
  	margin-left: -17px;
		width: 34px;
		height: 34px;
		background-color: @color4;
		z-index: 200;
//LESS Mixins
		.border-radius (100%);
		.box-shadow (0 0 0 1px @color2 inset, 0 2px 0 #ffffff inset, 0 2px 0 @color2);
		.transition (top 1s cubic-bezier(0.645, 0.045, 0.355, 1.000));
}

#history_clock.animate1 {
		top: 300px;
}

#history_clock.animate2 {
		top: 500px;
}

#history_clock.animate3 {
		top: 697px;
}

#clockface {
		display: block;
		position: relative;
		top: 4px;
		left: 4px;
		width: 26px;
		height: 27px;
//LESS Mixins
		.border-radius (100%);
		.2-color-gradient (@color1, darken(@color1, 13%), 25%, 75%);
		.box-shadow (0 0 0 1px @color2, 0 0 20px rgba(0,0,0,0.25) inset);
}

#clockglare {
		display: block;
		position: absolute;
		top: 2px;
		left: 5px;
		width: 16px;
		height: 8px;
//LESS Mixins
		.border-radius (100%);
		.2-color-gradient (rgba(255,255,255,0), rgba(255,255,255,.40), 0%, 100%);
}

#clockarm_1, #clockarm_2 {
//LESS Mixins
		.transition (all 1s cubic-bezier(0.645, 0.045, 0.355, 1.000));
}

#clockarm_1 {
		display: block;
		position: absolute;
		top: 4px;
		left: 12px;
		width: 2px;
		height: 10px;
		background-color: #ffffff;
		z-index: 10;
//LESS Mixins
		.border-radius (1px);
		.box-shadow (0 0 1px rgba(0,0,0,0.75));
		.transform-origin (50%, 10px);
}

#clockarm_2 {
		display: block;
		position: absolute;
		top: 6px;
		left: 12px;
		width: 2px;
		height: 9px;
		background-color: #ffffff;
		z-index: 20;
//LESS Mixins
		.border-radius (1px);
		.box-shadow (0 0 1px rgba(0,0,0,0.75));
		.transform (rotate(0.25turn) translate3d(0,0,0));
		.transform-origin (50%, 8px);
}

#history_clock.animate1 #clockarm_1 {
//LESS Mixins
		.transform (rotate(10.85turn) translate3d(0,0,0));
		.transform-origin (50%, 10px);
}

#history_clock.animate1 #clockarm_2 {
//LESS Mixins
		.transform (rotate(10.25turn) translate3d(0,0,0));
		.transform-origin (50%, 8px);
}

#history_clock.animate2 #clockarm_1 {
//LESS Mixins
		.transform (rotate(13.11turn) translate3d(0,0,0));
		.transform-origin (50%, 10px);
}

#history_clock.animate2 #clockarm_2 {
//LESS Mixins
		.transform (rotate(13.34turn) translate3d(0,0,0));
		.transform-origin (50%, 8px);
}

#history_clock.animate3 #clockarm_1 {
//LESS Mixins
		.transform (rotate(16.46turn) translate3d(0,0,0));
		.transform-origin (50%, 10px);
}

#history_clock.animate3 #clockarm_2 {
//LESS Mixins
		.transform (rotate(16.84turn) translate3d(0,0,0));
		.transform-origin (50%, 8px);
}