Css Transition Font-size: Avoid Jittering / Wiggling

I made the following tile, with an hover-effect that increases the font-size with an CSS-transition: When you hover them you can see that the transition of the font-size is not sm

Solution 1:

You can use CSS transform:scale instead for a smoother transition like so:

.website:hover {
  cursor: pointer;
  transition: border-color 0.4s;
  border-color: black;
}
.websitediv {
  transition: transform 0.3s ease-out;
}
.website:hoverdiv {
  transform: scale(1.5);
  transition: transform 0s;
}

Here is the JSFiddle demo

Also note that I added the texts within a div and the scaling was done on the div so that the whole box is not scaled :)

Solution 2:

On hover put transition: border-color 0s, font-size 0.3s ease-out;

Because on hover transition: border-color 0s will give only border-color transition not give to font-size.

body {
  font-family: 'Segoe UI', sans-serif;
}
.website {
  width: 180px;
  height: 73px;
  text-align: center;
  line-height: 80px;
  margin: 1px;
  color: white;
  border-bottom: 5px solid darkslateblue;
  background-color: darkslateblue;
  white-space: nowrap;
  overflow: hidden;
  transition: border-color 0.66s ease-out, font-size 0.3s ease-out;
}
.website:hover {
  font-size: 16pt;
  cursor: pointer;
  transition: border-color 0s, font-size 0.3s ease-out;
  border-color: black;
}

<divclass="website">Blog 1</div><divclass="website">Blog 2</div><divclass="website">Blog 3</div>

Solution 3:

Initially, I was using font-family: "Helvetica", sans-serif; It had shaky like earthquake animation. (Some test in divs were smooth, some were not. Inconsistent and random). Later, I did some change.

`@import url('https://fonts.googleapis.com/css2family=Poppins:wght@300&display=swap');

body {
    font-family: "Poppins", sans-serif;
}`

now, animations (especially font size animations) are smooth. Either the jittering animation is the problem of font specific. or the font you want to use failed to load in your browser.