My Logo Animation - Pure CSS (unfinished)

dabblet.css

/**
 * My Logo Animation - Pure CSS (unfinished)
 * View in dabblet: http://dabblet.com/gist/2693201
 */
* {
	box-sizing: border-box;
}

html {
	background: #e2e2e2 url(http://subtlepatterns.com/patterns/wood_pattern.png);
	min-height: 100%;
}

div {
	margin: 0;
	padding: 0;
	border: 0;
}

.logo {
	position: relative;
	left: 50%;
	min-width: 306px;
	min-height: 300px;
	width: 306px;
	height: 300px;
	margin-top: 35px;
	margin-left: -153px;
	padding: 200px;

	background: #FFF;
	background: rgba(255,255,255,0.5);
	border-radius: 35px;
}

/******************************************************/

.logo-piece {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 70px; height: 200px;
	border-radius: 35px;
	background: #999;
}
.logo-piece:hover {
	transition-property: background-color;
	transition-duration: 300ms;
	transition-timing-function: linear;
}

.logo-piece.top {
	margin-top: -150px;
	margin-left: -35px;
}
.logo-piece.top:hover { background: rgba(0,255,0,.5); z-index: 100; }

.logo-piece.topright {
	margin-top: -112px;
	margin-left: 24px;
	transform: rotate(65deg);
}
.logo-piece.topright:hover { background: rgba(255,255,0,.5); z-index: 100; }

.logo-piece.bottomright {
	margin-top: -35px;
	margin-left: 7px;
	transform: rotate(140deg);
}
.logo-piece.bottomright:hover { background: rgba(255,0,0,.5); z-index: 100; }

.logo-piece.bottomleft {
	margin-top: -35px;
	margin-left: -77px;
	transform: rotate(-140deg);
}
.logo-piece.bottomleft:hover { background: rgba(0,0,255,.5); z-index: 100; }

.logo-piece.topleft {
	margin-top: -112px;
	margin-left: -94px;
	transform: rotate(-65deg);
}
.logo-piece.topleft:hover { background: rgba(255,0,255,.5); z-index: 100; }

.logo-piece.center {
	z-index: 101;
	margin-top: -20px;
	margin-left: -35px;
	width: 70px;
	height: 70px;
	background: #FFF;
}

dabblet.html

<div class="logo">
	<div class="logo-piece top fade-in"></div>
	<div class="logo-piece topright"></div>
	<div class="logo-piece bottomright"></div>
	<div class="logo-piece bottomleft"></div>
	<div class="logo-piece topleft"></div>
	<div class="logo-piece center"></div>
</div>

settings.json

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