CSS Transition字体大小:避免抖动/摆动 [英] CSS Transition font-size: avoid jittering / wiggling

问题描述

我制作了以下图块，其悬浮效果通过CSS- transition 来增加 font-size :

I made the following tile, with an hover-effect that increases the font-size with an 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 的过渡一点都不平滑.换句话说，更改大小时它会上下摆动.
有没有人知道如何解决或解决它?

When you hover them you can see that the transition of the font-size is not smooth at all. In other words it wiggles up and down when changing size.
Does anyone have an Idea how to fix or work around it?

推荐答案

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

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;
}
.website div {
  transition: transform 0.3s ease-out;
}
.website:hover div {
  transform: scale(1.5);
  transition: transform 0s;
}

这是 JSFiddle 演示

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

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 :)

这篇关于CSS Transition字体大小:避免抖动/摆动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！