Animation só funciona no firefox

Felipe Paz · 26 de julho de 2017

E aí gurizada, beleza? É o seguinte, criei uma animação muito simples porém esta animação só funciona no firefox. Por que será?

HTML

<div class="down"><span></span></div>

E o CSS

.down span {
	position: relative;
	top: 10%;
	left: 50%;
}

.down span::before {
	content: '';
	position: absolute;
	top: 80%;
	left: 0;
	width: 3px;
	height: 10px;
	border-radius: 35%;
	background: #fff;
	transform: translate(-50%, 0);
}

.down span::after {
	content: '';
	position: absolute;
	top: 150%;	
	left: 0;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: #fff;
	-webkit-transform: translate(-50%, 100%);
	transform: translate(-50%, 100%);
	-webkit-animation: down 0.5s infinite linear;
	-moz-animation: down 0.5s infinite linear;;
	-ms-animation: down 0.5s infinite linear;;
	-o-animation: down 0.5s infinite linear;
	animation: down 0.5s infinite linear;
}

@-webkit-keyframes down {
	0% {top: 130%;}
	40% {top: 150%;}
	60% {top:  200%;}
	100% {top: 250%;}
}

@-moz-keyframes down {
	0% {top: 130%;}
	40% {top: 150%;}
	60% {top:  200%;}
	100% {top: 250%;}
}

@-o-keyframes down {
	0% {top: 130%;}
	40% {top: 150%;}
	60% {top:  200%;}
	100% {top: 250%;}
}

@keyframes down {
	0% {top: 130%;}
	40% {top: 150%;}
	60% {top:  200%;}
	100% {top: 250%;}
}