title: How to hide div under another during CSS3 animation
body: <p>The CSS code :</p>
  
  <pre><code>.mainDiv{
      width: 600px;
      height: 600px;
      background-color: blue;
  }
  
  .innerDiv{
      width: 400px;
      margin: auto;
      height: 400px;
      background-color: green;
  }
  
  .innerDiv div{
      width: 50px;
      height: 50px;
      background-color: red;
      display: inline-block;
  }
  
  
  .removing{
      -webkit-animation: slideout 1s;
      animation: slideout 1s;
  }
  
  @-webkit-keyframes slideout {
      0% {
          -webkit-transform: translateX(0px);
          transform: translateX(0px);
      }
      100% {
          -webkit-transform: translateX(-200%);
          transform: translateX(-200%);
      }
  }
  
  @keyframes slideout {
      0% {
          -webkit-transform: translateX(0px);
          transform: translateX(0px);
      }
      100% {
          -webkit-transform: translateX(-200%);
          transform: translateX(-200%);
      }
  }
  </code></pre>
  
  <p>Here is a <a href="http://jsfiddle.net/jbr5vf88/" rel="nofollow">jsFiddle</a> of the problem.</p>
  
  <p>What i would like it to do is this :</p>
  
  <p>When the first red block moves outside of the green block, i would like it to be behind the blue block instead of in front of it.</p>