title: Chaining Multiple CSS Animations
body: <p>I am trying to chain together 2 CSS animations, see pen: <a href="http://codepen.io/jdesilvio/pen/pjwvyO" rel="noreferrer">http://codepen.io/jdesilvio/pen/pjwvyO</a></p>
  
  <p><strong>I have followed the syntax provided in other answers to similar questions</strong>, but they don't seem to work correctly:</p>
  
  <pre><code>animation-name: falling, laydown;
  animation-duration: 2000ms, 1000ms;
  animation-timing-function: ease-in, ease-out;
  animation-iteration-count: 1, 1;
  </code></pre>
  
  <p>It is playing the second animation, then the first and finally the second one again. How can I get it to play the first, then second?</p>
  
  <p>Here is the full code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;style&gt;
  
  html, body {
    height: 100%;
  }
  
  body {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  @keyframes falling {
    0% {
      transform: translate3d(0, -400px, 0);
    }
    100% {
      transform:
        translate3d(0, 40%, 0)
        rotateX(30deg)
        rotateY(0deg)
        rotateZ(60deg);
    }
  }
  
  @keyframes laydown {
    0% {
      transform:
        translate3d(0, 40%, 0)
        rotateX(30deg)
        rotateY(0deg)
        rotateZ(60deg);
    }
    100% {
      transform:
        translate3d(0, 40%, 0)
        rotateX(70deg)
        rotateY(0deg)
        rotateZ(80deg);
    }
  }
  
  #falling-card-parent {
    height: 150px;
    width: 100px;
    margin: auto;
    perspective: 1000px;
  }
  
  #falling-card {
    height: 150px;
    width: 100px;
    background-color: black;
    margin: auto;
    transform:
      translate3d(0, 40%, 0)
      rotateX(70deg)
      rotateY(0deg)
      rotateZ(80deg);
    animation-name:
      falling, laydown;
    animation-duration:
      2000ms, 1000ms;
    animation-timing-function:
      ease-in, ease-out;
    animation-iteration-count:
      1, 1;
  }
  
  &lt;/style&gt;
  &lt;html&gt;
    &lt;body&gt;
      &lt;div id="falling-card-parent"&gt;
        &lt;div id="falling-card"&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>