<div class="changing-size">
  <span>
    Something amazing!!
  </span>
</div>
<button>Slowly Resize</button>

.changing-size {
  border: 1px solid red;
  height: 100px;
  width: 100px;
}

.resizing > * {
  display: none;
}

.resizing {
  background: #DDD;
}

let timerId;
let isFirst = true;
const elementToObserve = document.querySelector('.changing-size');
const resizeObserver = new ResizeObserver(entries => {
  if(isFirst) {
    isFirst = false;
    elementToObserve.classList.add('resizing');
  }
  clearTimeout(timerId);
  timerId = setTimeout(() => {
    isFirst = true;
    elementToObserve.classList.remove('resizing');
  }, 200);
});
resizeObserver.observe(elementToObserve);

document.querySelector('button').addEventListener('click', () => {
  let width = 100;
  elementToObserve.style.width = `${width}px`;
  const intervalId = setInterval(() => {
    width += 100;
    elementToObserve.style.width = `${width}px`;
    if(width > 500) {
      clearInterval(intervalId);
    }
  }, 100)
});