html - CSS 过渡字体大小 : avoid jittering/wiggling

Question

我制作了以下图 block ，带有悬停效果，通过 CSS-transition 增加了 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;
  border-color: black;
}

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

当您悬停它们时，您可以看到 font-size 的过渡一点也不平滑。换句话说，它会在改变尺寸时上下摆动。
有没有人知道如何修复或解决它？

Answer 1

您可以使用 CSS transform:scale 来实现更平滑的过渡，如下所示:

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

Here is the JSFiddle demo

另请注意，我在 div 中添加了文本，并且缩放是在 div 上完成的，因此 whole 框不会缩放:)