How to configure the css of keyframes for Firefox?

Question

Good Afternoon

My question concerns the configuration of keysframes for the Mozilla Firefox browser

In Chrome browser I used the following setting :

 #unidade-movel {
    position: absolute;
    left: 100%;
    top: 97px;
	  -webkit-animation: unidade-movel 10s infinite ;
		animation: unidade-movel 10s infinite;
}

@-webkit-keyframes  unidade-movel {
0% {
    top: 20px;
    left: 0%;
}

10% {
    top: 20px;
    left: 10%;
}
20% {
    top: 20px;
    left: 20%;
}
30% {
    top: 20px;
    left: 30%;
}
40% {
    top: 20px;
    left: 40%;
}
45% {
    top: 130px;
    left: 45%;
}
50% {
    top: 150px;
    left: 40%;
}
60% {
    top: 150px;
    left: 25%;
}
70% {
    top: 180px;
    left: 20%;
}
80% {
    top: 205px;
    left: 20%;
}
90% {
    top: 280px;
    left: 20%;
}
100% {
    top: 280px;
    left: 100%;
}
}

For Mozilla firefox I used the following configuration:

@keyframes unidade-movel {
0% {
    top: 20px;
    left: 0%;
}

10% {
    top: 20px;
    left: 10%;
}
20% {
    top: 20px;
    left: 20%;
}
30% {
    top: 20px;
    left: 30%;
}
40% {
    top: 20px;
    left: 40%;
}
45% {
    top: 130px;
    left: 45%;
}
50% {
    top: 150px;
    left: 40%;
}
60% {
    top: 150px;
    left: 25%;
}
70% {
    top: 180px;
    left: 20%;
}
80% {
    top: 205px;
    left: 20%;
}
90% {
    top: 280px;
    left: 20%;
}
100% {
    top: 280px;
    left: 100%;
}
}

The problem found is this, in Mozilla firefox the animation is at the top of the site when the correct is to stay in the middle and when I inspect the element I cannot reposition the element using css, I believe that the configuration for Mozilla is not correct, in some researches I did was directed to put a -Moz-keyframe or -Moz-Animation I did in the code but also did not have effect in other researches I was directed to remove the -Moz- but without success! I would like some guidance, thank you in advance!