How to animate the css zoom property

Question

Is it possible to get a smooth transition for the css zoom property?

I googled a lot, but the results for the keywords "css" and "zoom" are always about transform and transition. So, I don't want to know how to do it with transform and scale and so on. Just with the css zoom property.

document.querySelector('div').addEventListener('click', function(e) {
  e.target.classList.toggle('zoom');
});

div {
  width: 50px;
  height: 50px;
  background: red;
  cursor: pointer;
}

.zoom {
  zoom: 200%;
}

<div>click me!</div>

Answer 1

function zoomIn(tg) {
    let fr = 100;
    setInterval(function() {
        if(fr < 200) {
            fr++;
            tg.style.zoom = fr + "%";
        };
    }, 5);
}

function zoomOut(tg) {
    let fr = 200;
    setInterval(function() {
        if(fr > 100) {
            fr--;
            tg.style.zoom = fr + "%";
        };
    }, 5);
}


document.querySelector('div').addEventListener('click', function(e) {
  if(e.target.classList.contains('zoom')) {
      e.target.classList.remove("zoom")
      zoomOut(e.target);
  } else {
      e.target.classList.add("zoom");
      zoomIn(e.target);
  }
});

div {
  width: 50px;
  height: 50px;
  background: red;
  cursor: pointer;
  transition: .5s;
}

<div>click me!</div>