Messing about with keyframe animation

dabblet.css

/**
 * Messing about with keyframe animation
 */

@keyframes rot {
	0% {
		opacity: 0;
		transform: rotate(0deg);
	}
	25% {
		opacity: 1
		transform: rotate(90deg);
	}
	75% {
		opacity: 1
		transform: rotate(270deg);
	}

	100% {
		opacity: 0;
		transform: rotate(360deg);
	}
}

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

.orbit:before {
	border-bottom: 4px solid #fff;
	content: "";
	display: inline-block;
	height: 20px;
	margin: 0 10px 0 0;
	width: 20px;
	vertical-align: middle;
}

.orbit:hover:before {
	border-bottom: 4px solid #aeF;
	border-radius: 20px;
	animation: rot 1s 0 infinite linear;
}

dabblet.html

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

settings.json

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