使純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的動畫圖標跨瀏覽器兼容

回答

相關問題