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

-1

我有一些CSS动画天气图标，我想使跨浏览器兼容，现在他们在Firefox中完美工作，我正在谷歌铬兼容性工作。使纯CSS的动画图标跨浏览器兼容

因为它只是太多的代码，我只是设置了一个小提琴。 Here。

我添加了所有

-webkit-...

增加改造和动画和关键帧，但仍然是一个小错误，你可以在小提琴，朦胧的时候看到和下面是高达：

铬：

enter image description here

在t所需的行为他的观点是：

火狐：

enter image description here

我不明白我能做些什么，也许这里有人知道更好。

来源

2014-12-06 baao

一遍又一遍的阅读代码后，我也这么认为。我只是不明白为什么云不会改变。是否有任何动画或转换不是Chrome确认？ @戴感谢。:) – baao 2014-12-06 12:15:47

我发现了这个问题。我将您的情况简化为仅包含云的简化版本：http://jsfiddle.net/kcf44udg/1/，我注意到您的-webkit-前缀属性与非前缀版本不匹配的一些情况（因此它根本不是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; 
}

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

这里有一个工作版本：http://jsfiddle.net/kcf44udg/2/

来源

2014-12-06 12:22:44 Dai

是的！非常感谢。我还没有看到... – baao 2014-12-06 12:25:25

对于这样的情况，我喜欢用于咕噜声的autoprefixer工具，只需编写一次，它会照顾其余的，不会发生类似这样的错误。 – PiniH 2014-12-06 12:25:51

你的意思是？ https://github.com/postcss/autoprefixer好主意！ – baao 2014-12-06 12:27:29

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

回答

相关问题