CSS3動畫不起作用的顯示屬性設置爲內聯

Question

我一直在玩這個演示：http://ademilter.com/lab/liffect/（選擇：zoomIn）

ul[data-liffect="zoomIn"] li { 
opacity: 0; 
position: relative; 
display:inline-block; 
margin:0; 
padding:0; 
-webkit-animation: zoomIn 600ms ease both; 
-webkit-animation-play-state: paused; 
-moz-animation: zoomIn 600ms ease both; 
-moz-animation-play-state: paused; 
-o-animation: zoomIn 600ms ease both; 
-o-animation-play-state: paused; 
animation: zoomIn 600ms ease both; 
animation-play-state: paused; 

}

然後我試圖重現我發現它不起作用，如果列表項屬性設置爲「inline」，而不是「inline-block」 如果display屬性是「inline」，它只會褪色英寸

有趣的是，如果你看看o與開發面板riginal站點，演示中的列表項沒有顯示屬性設置爲「內聯塊」

因此，我必須使我的列表項內聯塊，但是這給了我的邊際元素。 反正有這個嗎？

我在這裏挑出來的動畫效果： http://jsfiddle.net/iki_xx/mDYDb/

我想要問的是： 你可以動畫元素的規模，如果該元素具有顯示屬性設置爲「內聯」 ？

Answer 1

是的，有一種解決方法。您可以通過鍵入不含空格的元素來刪除使用inline-block的空間。

事情是這樣的：

<ul data-liffect="zoomIn"><li><img src="http://cambelt.co/100x100"></li><li><img src="http://cambelt.co/100x100"></li><li><img src="http://cambelt.co/100x100"></li><li><img src="http://cambelt.co/100x100"></li><li><img src="http://cambelt.co/100x100"></li><li><img src="http://cambelt.co/100x100"></li></ul>​ 

這樣做的原因是因爲你seing的空間實際上不是margin，這是一個空格字符就像你輸入的單詞之間得到。內聯塊以同樣的方式呈現。另一種解決方法是改用float屬性。

這裏有一個demo.

希望幫助！