How can I transition a flexbox sliding in from the left, to be centered on the page?

Issue

I currently have a flexbox with css properties that look something like this:

#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;
}

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 margin: 0 auto 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.

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.

#root.slide-in {
    margin: 0 2%;
}

Edit:

My flexbox is inside of a container like this:

<div class="container">
    <!-- I want to center this flexbox -->
    <div id="root" class="flexbox"></div>
</div>

Solution

Instead of animating margin, you should use the CSS property transform, which is was created to use for this kind of transitions. Then you can leave the CSS layout properties such as margin and position intact. Unlike margin, changing transform will never change the positioning of surrounding elements.

https://developer.mozilla.org/en-US/docs/Web/CSS/transform

.container {
  background: #eee;
  padding: 10px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
}

#root {
  align-self: center;
  width: 85%;
  height: 60px;
  background: #ccc;
  transition: 1s transform;
  padding: 10px;
}

.hidden {
  transform: translateX(-100vw);
}

<div class=container onclick="document.querySelector('#root').classList.toggle('hidden')">
  <div id=root> This is #root </div>
  <p>click to hide or show #root</p>
</div>

Answered By - Håken Lid