title: How can I transition a flexbox sliding in from the left, to be centered on the page?
body: <p>I currently have a flexbox with css properties that look something like this:</p>
  
  <pre><code>#root {
      display: flex;
      width: 85%;
      border: 1px #F2F0F0 solid;
      margin: 0 -100%;
      position: relative;
      top: 15%;
      height: 600px;
      overflow: hidden;
      align-items: center;
      transition-property: margin;
      transition-duration: 1s;
  }
  </code></pre>
  
  <p>This pushes my flexbox entirely out of the screen, to the left. I now want to slide it in to the right, however, I read that you cannot use transition with computed values, like <code>margin: 0 auto</code> which is the css I would like my flexbox to transition to, in order to center my flexbox responsively to the center of my screen.</p>
  
  <p>How can I make this possible? I'm sure I'm missing something simple. My currently transition is just to a margin that isn't responsive, nor centered. </p>
  
  <pre><code>#root.slide-in {
      margin: 0 2%;
  }
  </code></pre>
  
  <p>Edit: </p>
  
  <p>My flexbox is inside of a container like this:</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;!-- I want to center this flexbox --&gt;
      &lt;div id="root" class="flexbox"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>