CSS-Animation 适用于 Chrome 和 Safari，但不适用于 Firefox 和 IE答案

【问题标题】：CSS-Animation works in Chrome and Safari, but not Firefox and IECSS-Animation 适用于 Chrome 和 Safari，但不适用于 Firefox 和 IE
【发布时间】：2014-10-26 18:39:10
【问题描述】：

我使用页面上显示的动画。它适用于 Chrome 和 Safari（webkit-Browser），但不适用于 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;
}

但这对我没有帮助。

【问题讨论】：

你能用工作图像创建一个小提琴吗，关键帧动画只适用于 > ie9
at:manuelweitzel.de 你可以看到动画 - 它适用于 Chrome 和 Safari。错误代码是针对另一个功能的，与动画无关
抱歉 - 现在应该可以了：manuelweitzel.de/test
它适用于 Chrome、Safari 和 Opera——但不适用于 Firefox 和 IE——有人知道吗？

标签： html internet-explorer css google-chrome firefox

【解决方案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 和动画就可以了。

【讨论】：

感谢您的回答 - 我添加了分号，但它仍然不起作用。还有其他想法吗？首先，我把 moz-aimation 的东西排除在外，但也没有用
就像我告诉过的那样，如果没有以 moz 为前缀的动画行，它就无法工作，并且不能与分号一起使用。 - 但是“moz-linear-gradient” - 行正在工作 - 如果我删除这个 moz-linear-gradient 行它也不起作用，所以似乎 Firefox 使用的不是 webkit 的东西，而是 moz-prefixes
Firefox 在某些 CSS 规则上使用 -moz 前缀，但它只使用不带前缀的动画规则。无论如何，我做了一点挖掘，this 说背景图像不能按照规范进行补间，并且只有 webkit 浏览器才有这种能力。您可以尝试他的建议，将所有这些图像堆叠在一起并使用不透明度进行动画处理，或者您可能想走 jquery 路线。
这是一个jsfiddle，它使用 jquery 为背景图像设置动画。您必须进行一些重大调整才能使其适合您（它最初用于交叉淡入淡出图像，而不是即时切换图像），但如果您决定使用 jquery，这可能是一个好的开始。