I have implemented a button and a circle. As soon as you click on the button, the circle is enlarged by 10 times. Unfortunately, this does not happen so nicely. Is there a possibility to add an animation to the enlargement? Unfortunately, I haven't found anything on the internet yet.
function zoom() {
let example = document.getElementById("a");
example.style.zoom = 10.0;
}div.circle {
width: 25px;
height: 25px;
border-radius: 100%;
background-color: orange;
}<button onclick="zoom()">Zoom</button>
<div id="a" class="circle"></div>The zoom property is non-standard. Instead, you should use the transform property and scale the circle.
function zoom() {
let example = document.getElementById("a");
example.style.transform = "scale(10,10)";
}div.circle {
width: 25px;
height: 25px;
border-radius: 100%;
background-color: orange;
transition: transform 0.5s;
transform-origin: top left;
}<button onclick="zoom()">Zoom</button>
<div id="a" class="circle"></div>