title: CSS @keyframes Animation: Scaling up a div does not change the "size of it's box"
body: <p>So I have got a list of <code>&lt;div&gt;</code> elements.</p>
  
  <p>I use JavaScript to change the contents of this list by inserting or removing elements according to filters, put in by users.</p>
  
  <p>When inserting/creating a new <code>&lt;div&gt;</code> element, I use <code>@keyframe</code> animations to change the opacity from <code>zero</code> to <code>one</code> and give a little fade in from the left.</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-css lang-css prettyprint-override"><code>@keyframes fade-in-left {
    0% {
      opacity: 0;
      transform: translateX(-20px);
    }
    100% {
      opacity: 1;
      transform: translateX(0);
    }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>Everything is working perfectly fine but there is one crucial design problem: </p>
  
  <p>What I want now, is a scale up animation. I can  easily do that but the problem is that when inserting a new element, the elements in the list after it snap to the position at which they would be when the inserted <code>&lt;div&gt;</code> has completed scaling to <code>1</code>.</p>
  
  <p>The problem here is obviously the following: Changing the scale of a transform does not affect the positioning of the other elements. I would have to change the height. But I cannot do that, there is padding, margin etc.</p>
  
  <p>So can anyone please tell me a solution to this problem? Thank you.</p>