使纯粹的css动画图标跨浏览器兼容

Question

我有一些css动画天气图标，我想让它们与浏览器兼容，现在他们在firefox中完美运行，我正在研究谷歌浏览器兼容性。

由于代码太多，我只是设置了一个小提琴。 Here

我添加了所有

-webkit-...

转换和动画以及关键帧的补充，但是当朦胧和随后出现时，你可以在小提琴中看到一些小错误：

铬：

此时所需的行为是：

火狐：

我没有得到我能做的其他事情，也许这里有人知道的更好。

Answer 1

我发现了问题。我将您的案例简化为仅包含云的简化版本：http://jsfiddle.net/kcf44udg/1/我注意到一些案例，其中-webkit - 前缀属性与非前缀版本不匹配（因此它不是＆＃39} ; Chrome中的任何错误）：

.cloud .cloud1:not(.c_shadow) ul li{
    animation: cloudi 10s 0.1s linear infinite;
    -webkit-animation: cloudi 10s 0.1s linear infinite;
}

.cloud .cloud1:not(.c_shadow):before{
    animation: cloudi 10s 0s linear infinite;
    -webkit-animation: cloudi 10s 0s linear infinite;
}

您错过了cloudi行中的-webkit-animation。

这是一个有效的版本：http://jsfiddle.net/kcf44udg/2/