Html css3过渡：浮动项上的流体布局动画

我想在Silverlight中构建一些类似流体布局转换的东西，或者类似于skydrive中新的css转换驱动的照片列表视图。我认为这可以通过CSS3来实现

假设我有这样的东西：

<div class="items">
    <div class="item">
        1
    </div>
    <div class="item">
        2
    </div>
    <div class="item">
        3
    </div>
</div>

<style>
    .item {
        float: left;
    }
</style>

其中的项目可以是一些正方形或图像或任何东西。 现在我们有了一个浮动的项目列表，在调整项目大小时，它会将项目包装起来。 我想实现的是，当这些项目被包装到下一行时，让它们流畅地设置动画，或者在它们之间浮动，为新添加的项目腾出位置

这也许可以通过使用绝对定位的一些javascript魔术来实现，但随后您将牺牲css布局，并且必须手动完成所有操作

有没有什么方法可以说像“过渡：左，前1”这样的词

我尝试将该项包装在某个父div中，即浮动，而该项本身具有绝对位置，但该位置相对于其父div，因此没有过渡

这是一段来自channel9的视频，显示了几种效果，我说的是1:20左右出现的效果。

jQuery就是这样做的。但请后退一秒

我的眼睛模糊了，需要好好睡一觉，所以如果这只是半连贯的话，我很抱歉，但也许这会给你指引正确的方向

首先，考虑合适的工作工具是很重要的。CSS3非常棒，但向后兼容性不强，所以对于较旧的浏览器，您仍然需要依赖javascript。如果你真的想这么做，Nuttuts总是一个很好的资源，这里有一个：

毫无疑问，我建议jQuery使用javascript库。你不必使用绝对定位，这都是关于你的具体目标。为了得到更具体的建议，你必须把它贴出来。Animate是一个很好的多用途函数，以及Fadin、fadeout，它们应该满足这个确切的需求。搜索例子，你应该找到你想要的

这里有预制的脚本和工具，你可以想象得到，我会在谷歌上搜索你想要的脚本/插件。很可能，它就在那里。这也是一个相当普遍的需求，至少是一般的概念

---

祝你好运！如果您遇到问题，请发送更多关于确切目标/功能的详细信息，如果您有，请发送网站当前的状态

您可以发布一个链接，以演示您试图实现的效果吗？同位素正是我想要的：感谢您的回复，Jquery仍然需要我手动计算项目位置和内容，无法使用css布局可能是通过一些黑客的方式。但这似乎是目前唯一的方法，还有一个非常好的JQuery插件，名为同位素，请参见上面的链接，它可以手动完成，但非常好。使用css3制作动画会很好，因为如果一些动画没有在旧的浏览器中显示，那就完全可以了。无论如何谢谢你