@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>本身或包装。