如何在页面调整大小时为内联块项目的移动设置动画（最好使用 css）？

Question

HTML

<div class="mosaic_tile" style="background:rgb(255,0,0);">
</div>
<div class="mosaic_tile" style="background:rgb(0,255,0);">
</div>
<div class="mosaic_tile" style="background:rgb(0,0,255);">
</div>

CSS

.mosaic_tile{
  width:100px;
  height:100px;
  display:inline-block;
}

https://jsfiddle.net/suse008b/

注意当页面宽度小于所述行上元素的总宽度时，元素如何移动到下一行。无论如何，我可以在元素重新阻塞时为元素的运动设置动画吗？

编辑：我找到了一个例子。类似于此网页的投资组合部分。 http://www.socialfix.com/

Answer 1

在您提到的示例网站上，他们正在使用一个名为 Isotope 的 javascript 库来实现该效果。

http://isotope.metafizzy.co/

如何在页面调整大小时为内联块项目的移动设置动画（最好使用 css）？

How to animate the movement of inline-block items on page resize (ideally using css)?

javascript

css-transitions