El temblor se debe a que su elemento se encoge y, por lo tanto, su cursor ya no se mueve (y luego vuelve a crecer cuando ya no se mueve, lo que hace que su cursor cambie nuevamente)

En lugar de cambiar el tamaño de su marcador, ¿por qué no usar un pseudo elemento? Entonces su mano no "temblará" ya que siempre se moverá sobre el marcador (pero el pseudo elemento cambiará de tamaño).

 .marker { width: 20px; height: 20px; display: inline-flex; justify-content: center; align-items: center; } .marker:hover { cursor: pointer; } .marker:after { content: ''; display: block; transition: all 0.5s ease; border: 2px solid #fff; background-color: #61ba9e; border-radius: 50%; width: 20px; height: 20px; box-sizing:border-box; } .marker:hover:after { height: 12.5px; width: 12.5px; box-shadow: 0 0 0 4px rgb(97 186 158 / 60%); }

 <div class="marker"></div>

Está temblando porque su objeto tiene originalmente un tamaño de 20x20 píxeles. Una vez que su mouse :hover el mouse, se reduce de tamaño.

Dado que el cursor no está perfectamente centrado en el objeto, llega a un punto en el que el mouse está fuera del cuadro delimitador de su elemento, lo que restaura su ancho original... que luego lo hace más grande y el mouse vuelve a estar dentro del cuadro delimitador. ..

¿Ves a dónde va esto, verdad? Tenemos un bucle infinito de reducción y crecimiento del cuadro delimitador del elemento.

Un truco para evitar esto puede ser proporcionar un envoltorio que permanezca en el tamaño 20x20 y hacer que el marcador responda al envoltorio que se está :hover