Question

我的p标签中的文字与Google Chrome上的@keyframes动画一起使用，但不适用于Firefox和/或IE。我正在运行最新版本的Firefox，无法弄清楚它为什么不起作用。帮助将不胜感激。 p标签内的文本应从浏览器窗口的左侧移动到中间。同样，它在Chrome中运行良好，但在Firefox和IE中是静态的。

[00008268:00008396, 2016/02/13, 04:29:02.785, ERROR] <- WapXmlReadRoleModel=0x1
[00008268:00008396, 2016/02/13, 04:29:02.801, ERROR] <- WapDoStartup=0x80070057
[00008268:00008396, 2016/02/13, 04:29:02.801, ERROR] <- DoStartup=0x80070057
[00008268:00008396, 2016/02/13, 04:29:02.801, ERROR] <- CRuntimeAgent::RemoveEndpointRegistration(0x000000C7B3DC7A20) =0x80070002
[00008268:00008396, 2016/02/13, 04:29:02.801, ERROR] <- CRuntimeAgent::UnregisterEndpoint(0x000000C7B3DC7A20) =0x80070002
[00008268:00008396, 2016/02/13, 04:29:02.801, ERROR] <- wmain=0x80070057

这是我的CSS

 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; }

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

@keyframes无法在Firefox或IE中运行。仅适用于Chrome

1 个答案: