CSS Transition 字体大小：避免抖动/摆动

Question

我制作了以下图块，具有增加 font-size 和 CSS- transition 的悬停效果：

 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 的过渡一点也不平滑。换句话说，它在改变大小时上下摆动。

有没有人知道如何修复或解决它？

原文由 CoderPi 发布，翻译遵循 CC BY-SA 4.0 许可协议

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;
}

这是 JSFiddle 演示

另请注意，我在 div 中添加了文本，缩放是在 div 上完成的，这样 整个 框就不会缩放 :)

原文由 Ahs N 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

悬停放置 transition: border-color 0s, font-size 0.3s ease-out;

因为在悬停时 transition: border-color 0s 只会给 border-color 过渡不会给 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;
}

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

原文由 ketan 发布，翻译遵循 CC BY-SA 3.0 许可协议