如何使用 CSS 过渡将 div 从屏幕外滑入绝对布局？

我有一个绝对定位的 div 网格（网格由不同形状的矩形组成，这些矩形组合在一起形成一个大矩形）。

我试图通过让所有单独的矩形从屏幕外“飞”到网格中来动画显示该网格。因此，左侧的矩形从左侧飞入，右侧的矩形从右侧飞入，依此类推。

我正在使用CSS3过渡，当从顶部或左侧飞入时，它工作得很好，我只是使用负边距将它们定位在屏幕之外，然后将其动画化以更改为margin-left（或margin-top）= 0（例如原始的/正确的位置）。

这似乎比使用转换更有意义，但如果您认为转换有理由因任何原因工作/性能更好，请纠正我？

然而，这显然不适用于 margin-right/margin-top ，所以我想看看是否有人可以建议从右侧和底部实现此目的的最佳方法是什么？我可以使父级溢出：隐藏并对左侧/顶部位置进行动画处理，这将具有相同的效果，但我想看看是否有一个相当于负边距的通用解决方案，以便防止屏幕外和屏幕上的每个位置都需要单独的规则/位置版本？例如，当使用负边距时，我可以对从同一侧飞入的所有框应用相同的负边距，而无需任何特定于元素的标记（但如果我对顶部/左侧进行动画处理，则每个元素将需要它自己的“屏幕外”相对位置）到它的最终位置，以便它从正确的位置飞入）。

或者，如果有更好的方法（CSS3 就可以！）那么我很想听听！

不要使用边距进行动画处理，而始终使用变换进行动画处理，这是它们的预期用途。这是 Paul Irish 写的一篇很棒的文章

为什么使用 translate() 移动元素更好http://paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/ http://paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/

使用overflow-x:hidden来隐藏从右侧进来的div。这是我制作的一个小提琴，用于展示如何在不指定像素值的情况下使用变换制作动画；

http://jsfiddle.net/P9GNS/3/ http://jsfiddle.net/P9GNS/3/

HTML

    <div class="box-wrapper loading"><div class="box"></div></div>
    <div class="box-wrapper loading"><div class="box"></div></div>
    <div class="box-wrapper loading"><div class="box"></div></div>
    <div class="box-wrapper loading"><div class="box"></div></div>
    <div class="box-wrapper loading"><div class="box"></div></div>
    <div class="box-wrapper loading"><div class="box"></div></div>

CSS

    body {
        overflow-x: hidden;
    }


    .box-wrapper {
        -webkit-transition-duration: 600ms;
        transition-duration: 600ms;
    }


    .box-wrapper.loading:nth-child(odd) { transform: translate(100%) }
    .box-wrapper.loading:nth-child(even) { transform: translate(-100%) }


    .box-wrapper:nth-child(odd)  .box { background: orange }
    .box-wrapper:nth-child(even) .box { background: red }


    .box {
        margin: auto;
        width: 100px;
        height: 100px;
    }

脚本语言

    $('.box-wrapper').each(function(index, element) {
        
        setTimeout(function(){
            element.classList.remove('loading');
        }, index * 600);

    });