Demo redBall landing page with animation

dabblet.css

/**
* Demo redBall landing page with animation
*/


body { background: black; padding: 100px; margin: 0; }

hgroup { 
  text-align: center;
  color: #e00;
  padding: 1px;
  font-family: 'Raleway', cursive;
  font-weight: 100;
  position: relative;
  background: linear-gradient(left, black, #e00, black);
}

hgroup:before {
  content: "";
  position: absolute;
  left: 50%;
  top: -50px;
  width: 600px;
  margin-left: -300px;
  margin-top: -220px;
  height: 600px;
  background: radial-gradient(50% 50%, ellipse closest-side, #444, black);
  z-index: -1;
}

hgroup h1, 
hgroup h2, 
hgroup a
 {
  background: black;
  display: block;
  padding: 20px;
  text-decoration: none;
  letter-spacing: 30px;
	color: #e00;


  	animation: comein 1.5s 1 ease-in-out forwards;

}
h1, h2 {
	padding: 0;
	margin: 0;
	line-height: 1;
	font-weight: normal;

}

h1 {
	font-family: 'OneFellSwoopRegular';
	font-size: 132px;
}

h2 {
	font-family: 'ExcellentiainexcelsisRegular';
	margin-top: 1px;
	font-size: 72px;
}

hgroup a:hover {
	background: radial-gradient(50% 50%, ellipse closest-side, #300, black);

}

@keyframes comein {
   0% { letter-spacing: 100px; color: rgba(255,255,255,0); }
   70% { letter-spacing: 0px; }
   100% { letter-spacing: 10px; color: rgba(255,255,255,1) }
}

.circle {
height:10px;
width:10px;
padding:0;
margin:0;
position:absolute;
left:50%;
top: 204px;
padding: 5px;

	background: radial-gradient(center, ellipse cover, #ff0000 0%,#ff0000 30%,#000000 30%,#000000 100%);
}

dabblet.html

<link rel="stylesheet" href="http://red-ball.info/fonts/fonts.css"> 

<hgroup><h1><a href="#">Title</a></h1><span class="circle">&nbsp;</span>
<h2>Tagline Tagline Tagline</h2></hgroup>

settings.json

{"view":"split","seethrough":"","prefixfree":"1","page":"css"}