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，则它不起作用。

如果显示属性是inline，它只会淡入。

有趣的是，如果您使用开发面板查看原始站点，演示中的列表项没有将显示属性设置为inline-block。

所以我必须让我的列表项inline-block，但这给了我元素的边距。

有没有办法解决这个问题？

我已经单挑了动画效果here。

如果元素的显示属性设置为inline，您能否为该元素的比例设置动画？

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>​

这是因为你看到的空格实际上不是margin，它是一个空格字符，就像你在输入的单词之间看到的一样。内联块以相同的方式呈现这些。另一种解决方法可能是改用float 属性。

这是demo.

希望对您有所帮助！