title: CSS Animation isn't working
body: <p>I made 2 animation, the first one is working properly while the second isn't. Although both are almost identical, it just won't work. I would appreciate any help!</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#menuAnim1 {
    height: 8px;
    background: black;
    position: relative;
    top: 50px;
    animation: widthStretch 4s ease-out;
    animation-fill-mode: forwards;
  }
  
  #menuAnim2 {
    width: 8px;
    background: black;
    position: relative;
    left: 50px;
    animation: heightStretch 4s ease-out;
    animation-fill-mode: forwards;
  }
  
  @keyframes widthStretch {
    from {
      width: 0;
    }
    to {
      width: 100%;
    }
  }
  
  @keyframes heightStretch {
    from {
      height: 0;
    }
    to {
      height: 100%;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id='menuAnim1'&gt;&lt;/div&gt;
  &lt;div id='menuAnim2'&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>You could see what I mean now. The second one should be increasing in it's height, then cross the first one, but it's not.</p>