CSS3 rotation and translate of 2 boxes

Problem

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);
  }
}
Problem courtesy of: Mladen Stanojevic

Solution

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.

Solution courtesy of: James Coyle

Discussion

There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.