Messing about with keyframe animation

dabblet.css

/**
 * Messing about with keyframe animation
 */

@keyframes rot {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

.orbit {
	height: 200px;
	width: 200px;
	left: 200px;
	top: 100px;
	position: absolute;
}

.orbit:before {
	border-bottom: 10px solid #aeF;
	border-radius: 100px;
	content: "";
	display: block;
	height: 200px;
	width: 200px;
	animation: 2s rot infinite linear;
}

dabblet.html

<div class="orbit"></div>

settings.json

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