Wie schiebe ich divs vom Bildschirm in ein absolutes Layout mit CSS-Übergängen?

Ich habe ein Gitter aus absolut positionierten divs (das Gitter besteht aus unterschiedlich geformten Rechtecken, die zusammenpassen, um ein großes Rechteck zu bilden).

Ich versuche, die Anzeige dieses Gitters zu animieren, indem ich alle einzelnen Rechtecke außerhalb des Bildschirms in das Gitter "fliege". So fliegen die Rechtecke links von links, die rechten rechts von rechts usw.

Ich verwende CSS3-Übergänge, und wenn ich von oben oder links einfliege, funktioniert es perfekt. Ich benutze nur negative Ränder, um sie außerhalb des Bildschirms zu positionieren und animiere sie dann, um zu margin-left (oder margin-top) = 0 zu wechseln ( zB die ursprüngliche / korrekte Position).

Dies scheint sinnvoller zu sein als die Verwendung von Transformationen, aber bitte korrigieren Sie mich, wenn Sie glauben, dass es einen Grund gibt, warum Transformationen aus irgendeinem Grund besser funktionieren / besser funktionieren?

Aber das wird offensichtlich nicht funktionieren für Margin-Right / Margin-Top und so wollte ich sehen, ob irgendjemand vorschlagen kann, was der beste Weg ist, dies von rechts und unten zu erreichen? Ich kann den Elternüberlauf machen: Versteckt und animiere die linken / oberen Positionen, die den gleichen Effekt haben, aber ich wollte sehen, ob es eine generische Lösung gibt, die negativen Margen entspricht, um separate Regeln / Positionen für jede Aus und auf dem Bildschirm zu vermeiden Ausführung? zB wenn ich negative Ränder benutze, kann ich den gleichen negativen Rand auf alle Felder anwenden, die von derselben Seite einfliegen, ohne irgendeine elementspezifische Markierung zu haben (aber wenn ich die obere / linke animiere, benötigt jedes Element seine eigene "Offscreen" Position relativ zu seiner endgültigen Position, so dass es von der richtigen Stelle einfliegt).

Alternativ, wenn es im Allgemeinen einen besseren Weg gibt (CSS3 ist in Ordnung!), würde ich es gerne hören!