Mysterious animation + transform behavior in Firefox

by knalli

HTML

<div class="spinner"></div>

CSS

@-webkit-keyframes spinnerRotate {
	from {
		-webkit-transform:rotate(0deg);
	}
	to {
		-webkit-transform:rotate(360deg);
	}
}
@-moz-keyframes spinnerRotate {
	from {
		-moz-transform:rotate(0deg);
	}
	to {
		-moz-transform:rotate(360deg);
	}
}
@keyframes spinnerRotate {
	from {
		transform:rotate(0deg);
	}
	to {
		transform:rotate(360deg);
	}
}

.spinner {
    -webkit-animation: spinnerRotate 2s linear 0 infinite;
    -moz-animation: spinnerRotate 2s linear 0 infinite;
    animation: spinnerRotate 2s linear 0 infinite;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 60px;
	height: 60px;
	margin-top: -30px;
	margin-left: -30px;
	background:...