@keyframes無法在Firefox或IE中使用。僅在Chrome上

Question

我的p標記中的文本與Google Chrome上的@keyframes動畫一起使用，但不適用於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>本身或包裝。