how can I make this font size small smoothly without jumps?

Question

I'm trying to reduce the size of the font gradually. But it looks like it shakes while turning small. How to make it look smooth?

.name:hover {
  color: green;
  transition-property: font-size;
  transition-duration: 2s;
  transition-timing-function: ease;
  font-size: 5px;
}

<div class="name">Name</div>

Answer 1

Use a transform:scale instead:

.name {
    transition: transform 2s;
    transform-origin: left
}
.name:hover {
    color: green;
    transform: scale(0.5);
}

<div class="name">Name</div>