Do elements positioned with percentage does not have transition effect?

I have literally taken days to understand percentPosition given in the article Masonry. I am still not sure if I understood it correctly or not. It is mentioned in article that

Sets item positions in percent values, rather than pixel values.
percentPosition: true works well with percent-width items, as items
will not transition their position on resize.

What I clearly understood is that items positioned with percent values works well when items width are set through percent. Now the the following part where I was struggling to understand which is

as items will not transition their position on resize

After reading and experimenting a lot, I have understood that transition does not happen when elements are positioned with percentage while with elements position with pixel values transition do happen (not aware of the reason)

I have just written a small code to demonstrate my understanding. Please let me know If my understanding aligned with the article and it is correct or not.

Basically there are three divs: bigdiv(parent div), rel-div(positioned with percent values) and fix-div(positioned with pixel). When parent div‘s width is 600px or greater,I relocated fix-div to new position and we can see transition effect on this pixel positioned element. While there is no transition effect no matter what width I set for parent width through input.

o      = document.querySelector(".bigdiv")
fixDiv = document.querySelector(".fix-div")
inp    = document.querySelector("#inp")
inp.addEventListener('change', e => {
  o.style.width = e.target.value + "px"
})
const resizeObserver = new ResizeObserver(() => {
  console.log('Width:', o.offsetWidth, 'Height:', o.offsetHeight);
  if (o.offsetWidth >= 600) {
    fixDiv.style.left = "120px"
  } else {
    fixDiv.style.left = "20px"
  }
});
resizeObserver.observe(o)

.bigdiv {
  height: 200px;
  width: 200px;
  overflow: auto;
  resize: horizontal;
  position: relative;
  background-color: aqua;
}

.rel-div {
  position: absolute;
  top: 10%;
  left: 20%;
  height: 50px;
  background-color: red;
  width: 50px;
  transition: left ease 1s;
}

.fix-div {
  position: absolute;
  top: 20px;
  left: 20px;
  height: 50px;
  background-color: blue;
  width: 50px;
  transition: left ease 1s;
}

<div class="bigdiv">
  <div class="fix-div"></div>
  <div class="rel-div"></div>
</div>
<br>
<lable>Width:</lable>
<input type="number" name="" id="inp">

I was going through Masonry JS article. I percentPosition