Html CSS动画适用于Chrome和Safari，但不适用于Firefox和IE

我使用页面上显示的动画。它适用于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;
}

---

但是这对我没有帮助。

查看您提供的链接中的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甚至不使用它们。Just-webkit动画和动画应该可以。

您可以创建一个工作图像吗？请，关键帧动画仅适用于>ie9at：您可以看到动画-它在Chrome和Safari中工作。错误代码是针对另一个函数的，与动画无关。现在应该可以了：它适用于Chrome、Safari和Opera，但不适用于Firefox和IE。有人有想法吗？谢谢你的回答。我添加了分号，但仍然不起作用。还有别的想法吗？首先，我把moz aimation的东西撇在一边，但不起作用，就像我说的那样，没有moz前缀的动画行，它就不起作用，分号也不起作用。-但是“moz线性渐变”行是有效的，如果我删除这个moz线性渐变行，它也不起作用，因此Firefox似乎不使用webkit，而是moz前缀Firefox在某些CSS规则上使用-moz前缀，但它只使用不固定的动画规则。无论如何，我做了一点挖掘，并说背景图像不能按照规范进行粗花处理，只有webkit浏览器才有这种能力。你可以尝试他建议的方法，将所有这些图像堆叠在一起，并使用不透明设置动画，或者你可能想使用jquery路线。下面是一个使用jquery设置背景图像动画的示例。您必须进行一些重大调整，使其适合您（最初用于交叉淡入淡出图像，而不是即时切换图像），但如果您决定使用jquery，这可能是一个良好的开端。