CSS3 rotation and translate of 2 boxes - html

Question

I got 2 boxes (200px X 200px) and I want to animate them with CSS animation. First (upper box) need to animate from rotateX(0deg) to rotateX(90deg) and I use transform-origin: center top. And I want second box to follow the bottom line of first box so I animate this box from translateZ(0px) translateY(0px) to translateZ(200px) translateY(-200px). And this is good only in start and end of animation. Example is on this link Animation example.
How to do this so box won't fall apart in between of start and end of animation?
In example I use only -webkit- and -moz- prefix.
JSFIDDLE
HTML
<div class="box box-1"></div>
<div class="box box-2"></div>
CSS
body{
padding: 200px 0 0 0;
margin: 0;
background-color: orange;
-webkit-transform-style: preserve-3d;
-webkit-perspective: 1000px;
-moz-transform-style: preserve-3d;
-moz-perspective: 1000px;
}
.box{
height: 200px;
width: 200px;
margin: 0 auto;
-webkit-transform-origin: center top;
-moz-transform-origin: center top;
opacity: 0.7;
}
.box-1{
background-color: blue;
-webkit-animation-duration: 3s;
-webkit-animation-name: boxOne;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-moz-animation-duration: 3s;
-moz-animation-name: boxOne;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: alternate;
}
.box-2{
background-color: purple;
-webkit-animation-duration: 3s;
-webkit-animation-name: boxTwo;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-duration: 3s;
-webkit-animation-name: boxTwo;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
}
#-webkit-keyframes boxOne{
from {
-webkit-transform: rotateX(0deg);
}
to {
-webkit-transform: rotateX(90deg);
}
}
#-webkit-keyframes boxTwo{
from {
-webkit-transform: translateZ(0px) translateY(0px);
}
to {
-webkit-transform: translateZ(200px) translateY(-200px);
}
}
#-moz-keyframes boxOne{
from {
-moz-transform: rotateX(0deg);
}
to {
-moz-transform: rotateX(90deg);
}
}
#-moz-keyframes boxTwo{
from {
-moz-transform: translateZ(0px) translateY(0px);
}
to {
-moz-transform: translateZ(200px) translateY(-200px);
}
}

Answer 1

That is quite a complicated animation. You may want to look into different easing methods for the translation. If you simplify the problem onto a 2D plane the top element height is increasing but the rate of growth increases over time. You can apply easing to the animation of the second element to mimic this increase over time. See if any of these help: http://easings.net/ The easeInCirc is probably the closest to (if not exactly) what you need.