title: Two animations on same element not working
body: <p><a href="http://jsfiddle.net/yfZ5k/show/" rel="nofollow"><strong>Fiddle</strong></a> <strong>|</strong> <a href="http://jsfiddle.net/yfZ5k/" rel="nofollow"><strong>Source</strong></a></p>
  
  <p>At <code>#lt</code>, I used two animations,</p>
  
  <pre><code>animation: fadeInStamp .5s linear 1 normal both;
  animation: leftArrowBounce .5s linear 1.5s 1 normal both;
  </code></pre>
  
  <p>But it doesn't work, even the first animation doesn't show work.</p>
  
  <p>But if I remove the second one, the first starts working</p>
  
  <hr>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>#lt {
      opacity: 0;
      transform: scale(4);
      animation: fadeInStamp .5s linear 1 normal both;
      animation: leftArrowBounce .5s linear 1.5s 1 normal both;
  }
  
  @keyframes fadeInStamp {
      0% { opacity: 0; }
      30% { opacity: 1; }
      60% { transform: scale(.7); }
      80% { transform: scale(1.3); }
      100% { opacity: 1; transform: scale(1); }
  }
  
  @keyframes leftArrowBounce {
      0% {  }
      50% { transform: translateX(-10px); }
      100% { transform: translateX(0); }
  }
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="lt"&gt;&amp;lt;&lt;/div&gt;
  </code></pre>