@keyframes 在 Firefox 或 IE 中不工作。仅限 Chrome

Question

我的 p 标签中的文本在 Google Chrome 上与 @keyframes 动画一起使用，但在 Firefox and/or IE 上不起作用。我是运行最新版本的 Firefox，无法弄清楚为什么它不起作用。帮助将不胜感激。 p 标签内的文本应该从浏览器的左侧 window 移到中间。同样，它在 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。

@keyframes 在 Firefox 或 IE 中不工作。仅限 Chrome

@keyframes not working in Firefox or IE. Only on Chrome

css

firefox

animation

keyframe