Animate two items moving away from each other until hitting container outline-CodePudding

For an intro animation, I want to animate two elements away from each other based on the outer container width to make it work responsive. Absolute positioning didn't worked for me because initialy the two items has to touch each other or have a constant, fixed distance between them.

Here is a representation of the animation:

body {
background: #707070;
  text-align: center;
}

.content {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #f7f7f7;
}

.animated .content {
  justify-content: space-between;
}

<section >
  <h2>1. before animation</h2>
  <div >
    <svg width="100" height="100">
      <rect width="100" height="100" fill="blue" />
    </svg>

    <svg width="50" height="50">
      <rect width="50" height="50" fill="green" />
    </svg>
 </div>
</section>

<section >
    <h2>2. after animation</h2>
    <div >
      <svg width="100" height="100">
        <rect width="100" height="100" fill="blue" />
      </svg>

      <svg width="50" height="50">
        <rect width="50" height="50" fill="green" />
      </svg>
   </div>
</section>

<section >
    <h2>3. custom container size</h2>
  <div  style="width: 80%;">
    <svg width="100" height="100">
      <rect width="100" height="100" fill="blue" />
    </svg>

    <svg width="50" height="50">
      <rect width="50" height="50" fill="green" />
    </svg>
 </div>
</section>

CodePudding user response：

I've just added a div in the middle of SVGs, when you click on Container I will add animated class to the container. in CSS I will change dummy flex to auto

document.getElementById("container").addEventListener("click", function() {
  this.classList.add('animated');
});

body {
  background: #707070;
  text-align: center;
}

.content {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #f7f7f7;
}

.content.animated .dummy {
  flex: auto;
}

.dummy {
  flex: 0;
  transition: flex 1s;
}

<section >
  <h2>Click on container</h2>
  <div id="container" >
    <svg width="100" height="100">
      <rect width="100" height="100" fill="blue" />
    </svg>

    <div ></div>

    <svg width="50" height="50">
      <rect width="50" height="50" fill="green" />
    </svg>
  </div>
</section>

</section>