title: Combining CSS Animations. What next?
body: <p>I am trying to make an animation of a stack of folders, where they will raise up, and then open to reveal the inside of the folder on hover (all but the bottom folder need to rise). </p>
  
  <p>So far I have made the all top folders rise, and I've made the bottom folder open. Where I'm stuck is how to get the top folders to open after they rise. (side problem: getting both the front flap and the back of the folder to rise at the same time).</p>
  
  <p>Here's a jsfiddle of what I have so far. Here to learn! Thanks</p>
  
  <p><a href="https://jsfiddle.net/m4ax81r6/" rel="nofollow">https://jsfiddle.net/m4ax81r6/</a></p>
  
  <p>Edit:
  To add a little more clarification - the front and back of the folder need to rise together on hover of the front of the folder. Then the front of the folder needs to fold down, while all still risen. Last, the folder needs to fold back up and lower when the mouse stops hovering.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
      &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
      &lt;title&gt;Untitled Document&lt;/title&gt;
      &lt;style&gt;
          .folder {
              width: 500px;
              height: 250px;
              display: block;
              transition: transform .5s;
              transition-timing-function: ease-in-out;
              position: relative
          }
          #folder1 {
              z-index: 1;
          }
          #folder2 {
              margin-top: -100px;
              z-index: 2;
          }
          #folder3 {
              margin-top: -100px;
              z-index: 3;
              bottom: 250px;
          }
          .movefolder:hover {
              transform: translatey(-100px);
          }
          .front {
              top: -105px;
              width: 500px;
              height: 240px;
              display: block;
              transition: transform .5s;
              transition-timing-function: ease-in-out;
              position: relative;
              animation-delay: 2s;
              transform-origin: bottom;
              z-index: 4;
          }
          .openfolder:hover {
              transform: rotateX(-85deg);
          }
      &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body style="margin-left:50px;  margin-top:100px; margin-bottom:50px;"&gt;
  
      &lt;img id="folder1" class="folder movefolder" src="https://s3.amazonaws.com/8z-marketing/8z+Mortgage/folder2-01.png" /&gt;
      &lt;img id="folder2" class="folder movefolder" src="https://s3.amazonaws.com/8z-marketing/8z+Mortgage/folder2-01.png" /&gt;
      &lt;img class="front openfolder" src="https://s3.amazonaws.com/8z-marketing/8z+Mortgage/front-folder-border-01.png" /&gt;
      &lt;img id="folder3" class="folder" src="https://s3.amazonaws.com/8z-marketing/8z+Mortgage/folder2-01.png" /&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>