How to use margins in CSS Firefox animations

问题

I have an animation:

@media (max-width: 768px). 
{.fptext {color:white; 
font-weight: bolder; 
position: relative; bottom: 
450px; font-size: 0px; 
left: 100px; text-size- 
adjust:none;}}



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

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

@media(max-width: 768px) 
{.textwidget>.fatext{
animation: bigger 30s 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;}}

@media (max-width:768px). 
{.fptext {margin-top: 
-325px; z-index:7; 
color:#43ff0a; margin-left: 
-200px; 
}}

@media(max-width: 768px). 
{.black{animation: 
blacktext 30s ease 
forwards;animation-delay: 
0s;; 
position:relative;font- 
size: 15px; 
color:#000;bottom: 737px; 
font-weight:bolder;padding: 
0px;background-  
color:transparent;displa
y:block;z-index: 20; 
right:22px;


}} 

@keyframes blacktext 
{from{font-size: 0px} to 
{font-size: 45px;}}

<div class="fatext">text 
text></div>
<div class="fptext">text 
text></div>
<div class="black">text 
text></div>

As you can see, I've used bottom and margin-bottom, with position relative, and margin structure is generally quite complex. Chrome understands this, Firefox doesn't. Is there some kind of issue with margins in Firefox because it sends element fatext and black below where it should be, whereas Chrome, and every other browser, positions it where I want it?

Page here mobile

来源：https://stackoverflow.com/questions/59830383/how-to-use-margins-in-css-firefox-animations