@keyframes не работает в Firefox или IE. Только в Chrome

Question

Текст в моем теге p работает с анимацией @keyframes в Google Chrome, но не работает в Firefox и/или IE. Я использую последнюю версию Firefox и не могу понять, почему она не работает. Помощь была бы оценена. Текст в теге p должен перемещаться с левой стороны окна браузера, до середины. Опять же, он отлично работает в Chrome, но является статичным в Firefox и IE.

h.h1 p { 
margin-top: 25px; 
font-size: 21px; 
text-align: center; 

animation-name: fromleft; 
animation-duration: 2s; 
animation-timing-function: ease; 


-moz-animation-name: fromleft; 
-moz-animation-duration: 2s; 
-moz-animation-timing-function: ease; 

-webkit-animation-name: fromleft; /* Safari, Chrome and Opera > 12.1 */ 
-webkit-animation-duration: 2s; 
-webkit-animation-timing-function: ease; 

-ms-animation-name: fromleft; 
-ms-animation-duration: 2s; 
-ms-animation-timing-function: ease; 
} 


@keyframes fromleft { 
0% { margin-left: -5000px; } 
50% { margin-left: 0px; } 
100% { margin-left: auto ; margin-right: auto; } 
} 

/* Safari, Chrome and Opera > 12.1 */ 
@-webkit-keyframes fromleft { 
    0% { margin-left: -5000px; } 
50% { margin-left: 0px; } 
100% { margin-left: auto ; margin-right: auto; } 

/* Internet Explorer */ 
@-ms-keyframes fromleft { 
0% { margin-left: -5000px; } 
50% { margin-left: 0px; } 
100% { margin-left: auto ; margin-right: auto; } 
} 

/* Opera < 12.1 */ 
@-o-keyframes fromleft { 
    0% { margin-left: -5000px; } 
50% { margin-left: 0px; } 
100% { margin-left: auto ; margin-right: auto; } 
} 

/* Firefox < 16 */ 
@-moz-keyframes fromleft { 
0% { margin-left: -5000px; } 
50% { margin-left: 0px; } 
100% { margin-left: auto ; margin-right: auto; } 

А вот мой CSS

<div class="h1"> 
    <h1> Some Text </h1> 

    <div> 
    <p> Some Text </P> 
    </div> 
</div> 

Answer 1

Я думаю, что проблема в том, что animation (как transition) имеет проблемы с auto значениями. Но следующий, кажется, работает в текущем Firefox, просто не знаю, если она соответствует вашим потребностям:

@keyframes fromleft { 
    0% { 
    margin-left: -5000px; 
    } 
    50% { 
    margin-left: 0px; 
    } 
    100% { 
    /*margin-left: auto; 
    margin-right: auto;*/ 
    } 
} 

Вот a codepen.

В вашем примере это не имеет значения, потому что текст по центру. В других случаях вам нужно указать фиксированные значения вместо auto либо самому <p>, либо оболочке.