Firefox css animations

Question

I have mobile view animation which works perfectly on Chrome mobile but on Firefox the element positioning result is way off. Works fine in Opera and Safari.

<div 
class="fptext">text/text   
Text/text</div>
<div  
class="fatext">text/text/
text/txt</div>

CSS-ANIMATION:

@media (max-width: 768px). 
{.fptext {animation: fadeout 
50s ease forwards;animation. 
delay: 0s;padding:0px;
}}

@keyframes fadeout{
from {font-size: 0px} to 
{font-size: 40px;}}

@media(max-width: 768px). 
{.fatext{animation: bigger 
50s ease forwards;animation. 
delay: 0s;; 
position:relative;font-size: 
15px; color:#43ff0a;bottom: 
1700px; font- 
weight:bolder;padding: 
0px;background 
color:blue;display:block
;margin-bottom: -1750px
}} 

@keyframes bigger 
{from{font-size: 0px} to 
{font-size: 18px;}}

See mobile here

Answer 1

i inspected your code on my browser and when i have cross browser issues i start with a normalize or reset depending on my needs, i didnt see either in the head when i inspected so you may see an improvement by just adding a normalize.css to your project. also you are worrying about a problem for 0.62% of the united states market share, so less than 1 percent of people use it.