@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。

在您的示例中，它没有区别，因为无论如何文本都是居中的。在其他情况下，您必须为 <p> 本身或包装器指定固定值而不是 auto。