How to shift in divs from the screen to the absolute layout using CSS transitions?

Question

I have a grid of absolutely positioned divs (the grid consists of rectangles of various shapes that fit together to make a large rectangle).

I'm trying to animate the display of this grid by making all the individual rectangles “fly” into the grid from the screen. Thus, the rectangles on the left move on the left, on the right - on the right, etc.

I use CSS3 transitions, and when you fly from above or to the left, it works fine, I just use negative margins to place them off the screen and then animate it to change to margin-left (or margin-top) = 0 ( e.g. original / correct position).

This seems to make more sense than using transforms, but please correct me if you think there is a reason the transformation will work / work better for any reason?

However, this obviously will not work for margin-right / margin-top, and so I would like to know if anyone can suggest which best way to achieve this is from the right and bottom? I can do the overflow of the parent path: hidden and animate left / top positions that will have the same effect, but I would like to see if there is a general solution equivalent to negative fields to prevent the need to use separate rules / positions for each screen and on screen version? for example, when using negative margins, I can apply the same negative marker to all boxes that fly on one side, without any specific label of the element (but if I animate the top / left side, then each element will need its own "off-screen "the position relative to him is the final position so that it flies from the right place).

Alternatively, if there is a better way at all (CSS3 is great!), Then I would love to hear it!

Answer 1

Not animation with fields, always live with transformations, that is, their intended use. Here's a great article on that from Paul Irish

Why moving elements with translate () is better http://paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/

Use overflow-x: hidden to hide the divs coming in from the right. Here is the fiddle I made to show how you can animate with a conversion without specifying pixel values;

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; } 

JAVASCRIPT

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

Answer 2

Usually transform: translate... gives better performance in most browsers as they try to render animations using the GPU.

You can check these jsperf results.

In any case, another good solution (without javascript) would be to attach the whole animation in CSS using the @keyframes and animation: properties.

Further information on this issue can be found in this article .

From the recommendations you can read

Use CSS keyframes or CSS transitions, if at all possible. The browser can optimize the drawing and layout of bigtime here.