Почему не работает css анимация в FireFox?

Question

[Andrey Dyrkov]

.body-breack{
	// background-image:url('../images/4.jpg');
	background-color:#1CA8DD;
	color:#fff;
	span.glyphicon.glyphicon-cog{
		font-size:100px;
		&:before{
			-webkit-animation: animateCog 3s linear 0s infinite normal;
			-moz-animation: animateCog 3s linear 0s infinite normal;
			animation: animateCog 3s linear 0s infinite normal;
		}
	}
	.header{
		width:100%;
		height:100%;
		position:relative;
		display: table;
		.wrap{
			padding:0 20px;
			width:100%;
			height:100%;
			display: table-cell;
			text-align: center;
			vertical-align: middle;
		}
	}
	h1{
		font-weight:bold;
		font-size:50px;
		padding:10px 0 10px 0;
	}
	h4{
		padding:5px 0;
	}
	a{
		color:#5CE8FF;
	}
}

@keyframes animateCog {
	0%{
		transform:rotate(0deg);
	}
	100%{
		transform:rotate(360deg);
	}
}
@-webkit-keyframes animateCog {
	0%{
		-webkit-transform:rotate(0deg);
	}
	100%{
		-webkit-transform:rotate(360deg);
	}
}

@-moz-keyframes animateCog {
	0%{
		-moz-transform:rotate(0deg); 
	}
	100%{
		-moz-transform:rotate(360deg);
	}
}

Анимируеться псевдоэлемент, работает всё в IE 10, Chrome, Opera, Yandex не работает в Safari(у меня палёнка может поэтому) и FireFox, сам FireFox находит анимацию, не перечёркивает, он просто её не запускает чтоли...

Answer 1

[Ден Тоцкий]

попробуйте к &:before{ ... добавить display: inline-block;