CSS 动画适用于 Chrome 上的 JSFiddle，但不适用于 localhost 上的 Chrome答案

【问题标题】：CSS animation works on JSFiddle on Chrome but not on Chrome on localhostCSS 动画适用于 Chrome 上的 JSFiddle，但不适用于 localhost 上的 Chrome
【发布时间】：2014-12-21 18:47:11
【问题描述】：

真是奇怪的问题。

当我从这个 JSFiddle:http://jsfiddle.net/timrpeterson/4FMyA/26/ 复制粘贴代码到我的 localhost 服务器时，火焰四处移动的动画在 Firefox 上有效，但在 Chrome 上无效。此外，JSFiddle 会在 Chrome 上为火焰设置动画。

我在本地主机上的 Chrome 上遇到的错误是 invalid property value。

有人有什么想法吗？

【问题讨论】：

您是否在本地主机中添加了prefixfree.min.js？
谢谢！请随时将此添加为答案，我会投票并接受。但是，仍然有一些没有意义的东西。 JSFiddle 和我的 localhost 使用 same 浏览器 Chrome 以不同的方式工作。这一定是iframes 的浏览器错误？

标签： css google-chrome firefox css-animations

【解决方案1】：

一些浏览器需要前缀来运行css3动画，通过添加prefixfree.min.js你的动画作品

例如

-webkit- /* for chorme */
-moz- /* for mozilla */
-o- /* opera */

例如

-webkit-animation-delay:0s;
   -moz-animation-delay:0s;
     -o-animation-delay:0s;
        animation-delay:0s;

这个插件生成前缀

【讨论】：

虽然我接受了这个答案，但仍然存在两个重要问题：1）如何在不添加前缀 JS 文件的情况下完成这项工作。最好有一个纯 CSS 的解决方案，原因有几个，最重要的是因为 JS 插件没有以开发人员视觉上明显的方式更正 CSS。意思是，开发人员不知道问题出在哪里。 2）为什么这适用于 Chrome 上的 JSFiddle，但不适用于我的本地主机。由于两次都是相同的浏览器，这可能意味着 Chrome 存在错误。