My name is ... 12s animation

dabblet.css

/**
 * My name is ... 12s animation
 */
 
/* 
* currently only works in Firefox cause there is a bug in Webkit https://bugs.webkit.org/show_bug.cgi?id=23209
*/

p,
h1 span {
	font-family: Arial, sans-serif;
	color: #666;
	font-size: 30px
}

h1 {
	display: block;
	position: relative;
	color: #fff;
}

h1 span {
	display: block;
	font-size: 80px;
	font-weight: normal;
	margin: 4px;
	padding: 141px 0 0 245px;
	overflow: hidden;
	width: 230px
}

h1:before {
	display: block;
	position: absolute;
	content: "M";
	font-family: Arial, sans-serif;
	color: #ddd;
	font-size: 300px;
	line-height: 300px;
	color: #fff; 
	text-shadow: #ddd 2px 2px 20px;
	overflow: hidden
}

h1:after {
	display: block;
	position: absolute;
	content: "";
	width: 30px;
	height: 30px;
	background-color: fff;
	border-radius: 50%;
	top: 230px;
	left: 22px;
	box-shadow: 0 0 15px 1px #000000;
}

h1:before {animation: magic 12s 1}
h1:after {animation: m 12s 1}
h1 span {animation: ichael 16s 1}

@keyframes m{
	0% {top: 230px; left: 22px;}
	30% {top: 40px; left: 22px;}
	35% {top: 40px; left: 22px;}
	50% {top: 230px; left: 100px;}
	65% {top: 30px; left: 200px;}
	100% {top: 230px; left: 200px;}
}

@keyframes ichael {
	0% {width: 0%}
	60% {width: 0%}
	100% {width: 230px}
}

@keyframes magic{
	0% {width: 0px}
	35% {width: 0px}
	50% {width: 80px}
	65% {width: 180px}
	100% {width: 250px}
}

dabblet.html

<p>My Name is</p>
<h1>M <span>ichael</span></h1>

settings.json

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