Text is shaking on increasing font size

Question

I am trying to increase font-size on click-through jquery by adding class but facing a very strange issue. The text starts shaking while it is getting bigger. Can anybody give me a solution and explain to me why it is happening? Actually, I have tried scale and my text is not shaking on transform: scale but I don't want scale there. It should work out through font-size.

The gif quality is not smooth, but as you can see it is shaking up and down.

Here is the working example of code.

$("div h3").click(function() {
	$("div h3").removeClass("active");
	$(this).addClass("active");
})

body {
  font-family: 'Roboto', sans-serif;
}
div {
  
}
div h3 {
  font-size:40px;
  font-weight:800;
  opacity:0.3;
  margin:0;
  transition:0.4s ease all;
}
div h3.active {
  font-size:60px;
  opacity:1;
  transition:0.4s ease all;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900&display=swap" rel="stylesheet">

<div>
  <h3>Hello</h3>
  <h3>Hello</h3>
  <h3>Hello</h3>
</div>

Answer 1

Use scale and adjust the transform-origin:

$("div h3").click(function() {
	$("div h3").removeClass("active");
	$(this).addClass("active");
})

body {
  font-family: 'Roboto', sans-serif;
}
div {
  overflow:hidden;
}
div h3 {
  font-size:40px;
  font-weight:800;
  opacity:0.3;
  margin:0;
  transition:0.4s ease all;
  transform-origin:left;
}
div h3.active {
  transform:scale(1.5);
  opacity:1;
  transition:0.4s ease all;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900&display=swap" rel="stylesheet">

<div>
  <h3>Hello</h3>
  <h3>Hello</h3>
  <h3>Hello</h3>
</div>