html div 绝对布局,html - 如何使用CSS过渡将div从屏幕外滑入绝对布局？ - 堆栈内存溢出...

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

使用overflow-x：hidden来隐藏从右边进来的div。 这是一个小提琴，用于展示如何在不指定像素值的情况下使用变换进行动画处理;

HTML

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;

}

JAVASCRIPT

$('.box-wrapper').each(function(index, element) {

setTimeout(function(){

element.classList.remove('loading');

}, index * 600);

});