title: Counter transform in css animation
body: <p>In some interface, I want to do animations. Since the transform property is far more optimized for that than other CSS properties, I'll use that.</p>
  
  <p>With transform: scale() : When element aspect ratio doesn't change, no problem. When ratio is supposed to change, the solution I found is to put a container, and in this container an inner. Then apply the opposed transform to the inner block so the ratio look preserved during and after animation.</p>
  
  <p>I did a pen to test the idea, and it works, but with a problem during the animation: the inner block look stretched during animation. I don't get why given that animation time is the same, and easing is linear.</p>
  
  <p><a href="https://codepen.io/AdamElio/pen/PabejP" rel="nofollow noreferrer">https://codepen.io/AdamElio/pen/PabejP</a></p>
  
  <p>(Cick on the menu to toggle animation)</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-js lang-js prettyprint-override"><code>document.querySelector('#menu').addEventListener('click', function() {
      this.classList.toggle('collapsedd')
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#menu {
    margin: 30px;
    padding: 15px;
    background: white;
    width: 150px;
    overflow: hidden;
    transform-origin: top center;
    transition: transform .5s linear;
  }
  
  #menu.collapsedd {
    transform: scaleY(.2);
  }
  
  #menu .inner {
    transition: transform .5s linear;
    transform-origin: top center;
  }
  
  #menu.collapsedd .inner {
    transform: scaleY(5);
  }
  
  #menu .inner ul {
    padding: 0;
    margin: 0;
    list-style: none;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;nav id="menu"&gt;
    &lt;div class="inner"&gt;
      &lt;h5&gt;Menu&lt;/h5&gt;
      &lt;ul&gt;
        &lt;li&gt;Link 1&lt;/li&gt;
        &lt;li&gt;Link 2&lt;/li&gt;
        &lt;li&gt;Link 3&lt;/li&gt;
        &lt;li&gt;Link 4&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/nav&gt;
  
  &lt;div id="transform"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>