title: Using CSS transform without it taking up original space
body: <p>I want to use a CSS transform to animate a video to display on a page, but I want the video to push the content down as it animates in, instead of the default situation where the space of the video already exists within the UI.</p>
  
  <p>I created a jsfiddle to show what I mean here: <a href="https://jsfiddle.net/njpatten/198sh5ec/2/" rel="nofollow noreferrer">https://jsfiddle.net/njpatten/198sh5ec/2/</a></p>
  
  <p>I prefer to only transform the element for performance reasons, but I've tried modifying height as well to get the desired effect, but the result is a bit jumpy, and also not as performant as I'd like.</p>
  
  <pre><code>.video {
      transform-origin: 0 0;
      transform: scale(0, 0);
      transition: 0.2s;
      height: 0;
      &amp;.open {
          transform: scale(1, 1);
          height: 100%;
      }
  }
  </code></pre>
  
  <p>Is there a 'hack' that I'm missing that could solve this issue? How do animators deal with the element taking up space when trying to animate in an element while still keeping things performant (and therefore only animating transforms and opacity).</p>
  
  <p>Thanks in advance!</p>