Javascript style.transform = scale(x,y) animation not working

Question

I was trying to make an animation using the style.transform property. The intention was to loop the transform scale property with slight increase in x and y on each round, but it failed. How can I achieve this effect?

x = document.getElementById("btn");
x.onclick = function() {
  for (let y = 0; y < 1; y += 0.1) {
    x.style.transform = 'scale(1.' + y + ',' + '1.' + y + ')';
  }
}

<button id='btn'>button</button>

Answer 1

You should use CSS transitions. Style your button like so:

#btn {
  transition: transform 0.1s
}

That code will make the button transition during 0.1 seconds whenever the transform property is changed, for example the scale.

Then, from your JavaScript code, you juste have to assign the transform style once, and CSS will transition automatically.

x = document.getElementById("btn");

x.onclick = function() {
  x.style.transform = 'scale(2,2)'; // or any x and y value
}

x = document.getElementById("btn");

x.onclick = function() {
  x.style.transform = 'scale(2,2)'; // or any x and y value
}

#btn {
  transition: transform 0.1s
}

<button id="btn">button</button>