CSS动画在Chrome和Safari中有效，但在Firefox和IE中无效。

Question

CSS动画在Chrome和Safari中有效，但在Firefox和IE中无效。

htmlinternet-explorercssgoogle-chromefirefox

3

我在我的网页上使用了一种动画效果。它可以在Chrome和Safari（webkit浏览器）上正常工作，但在Firefox（moz）和Internet Explorer上无法正常工作。我不知道原因，但这是我的代码：

#Area {
   -webkit-animation: WriteText 2s;
   -moz-animation: WriteText 2s;
   animation: WriteText 2s;
}

@-webkit-keyframes WriteText {
   0%   { background: #fff url('../media/header/header00.jpg'); background-size: 1000px 263px; opacity: 1; }
   5%   { background: #fff url('../media/header/header01.jpg'); background-size: 1000px 263px; opacity: 1;  }
........
   100% { background: #fff url('../media/header/header.jpg'); background-size: 1000px 263px; opacity: 1; }
}

@-moz-keyframes WriteText {
   0%   { background: #fff url('../media/header/header00.jpg'); background-size: 1000px 263px; opacity: 1; }
   5%   { background: #fff url('../media/header/header01.jpg'); background-size: 1000px 263px; opacity: 1;  }
........
   100% { background: #fff url('../media/header/header.jpg'); background-size: 1000px 263px; opacity: 1; }
}

@keyframes WriteText {
   0%   { background: #fff url('../media/header/header00.jpg'); background-size: 1000px 263px; opacity: 1; }
   5%   { background: #fff url('../media/header/header01.jpg'); background-size: 1000px 263px; opacity: 1;  }
........
   100% { background: #fff url('../media/header/header.jpg'); background-size: 1000px 263px; opacity: 1; }
}

除CSS以外的其他事项在每个浏览器中都能正常工作，浏览器特定部分的内容对于动画来说是相同的，所以我不知道为什么它不起作用。

我已经尝试写成这样:

#Area {
   -webkit-animation-name: WriteText;
   -webkit-animation-duration: 2s;
   -moz-animation-name: WriteText;
   -moz-animation-duration: 2s;
   animation-name: WriteText;
   animation-duration: 2s;
}

但这对我没有帮助。

- Manuel Weitzel

请问您能否创建一个带有工作图像的fiddle吗？关键帧动画只适用于ie9以上版本。 - Huangism

在http://manuelweitzel.de/上，您可以看到动画 - 它在Chrome和Safari中运行。错误代码是针对另一个功能的，与动画无关。 - Manuel Weitzel

抱歉 - 现在应该可以了：http://manuelweitzel.de/test/ - Manuel Weitzel

它适用于Chrome、Safari和Opera，但不适用于Firefox和IE——有人有想法吗？ - Manuel Weitzel

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Scott Blinch · Answer 1

从您提供的链接中查看CSS文件，您在-moz-animation-name和-moz-animation-duration后面缺少分号：

#NavigationArea .ImgAni {
position: relative;
width: 1000px;
height: 263px;
background: #E0FFFF url('../media/header/header.jpg');
opacity: 1;
background-size: 1000px 263px;
-webkit-animation-name:WriteText;
-webkit-animation-delay: 1s;
-webkit-animation-duration: 3s;
-moz-animation-name: WriteText /* missing semicolon here */
-moz-animation-delay:  1s;
-moz-animation-duration: 3s /* missing semicolon here */
animation-name:WriteText;
animation-delay: 1s;
animation-duration: 3s;
}

这会导致非 Webkit 浏览器无法识别动画名称。尝试添加这些分号并报告结果。或者你可以完全删除那些具有 moz 前缀的动画行，因为它们是唯一缺少分号的行，而 Firefox 甚至不使用它们。只需使用 -webkit-animation 和 animation。