让文本过渡更加平滑

Question

我在我的网站上有这样一个文本<span>，我想让它在鼠标悬停时以font-size方式增大字体。我使用了通常的transition: 1s font-size ease，但这只会导致非常粗糙的过渡。我想让它平滑地进行，这样就不会在中间有微小的间隔了。

下面是我被裁剪过的HTML+CSS element: ```html

我的代码： 要增加字体的文字

```

span {
  font-size: 12px;
  font-family: sans-serif;
  transition: 1s font-size ease;
 }
span:hover {
  font-size: 24px;
}

<span>Aravind's Site</span>

顺便说一下，除非绝对必要，否则请不要使用jQuery。

- Aravind Suresh Thakidayil

Answer 1

不必 转换 font-size，您可以使用scale与transition一起使用：

1. Add these transition rules to span:

   transition: transform 1s ease;
   display: inline-block;
   transform-origin: left;
   

2. On hover use transform: scale(1.5)

span {
  font-size: 12px;
  font-family: sans-serif;
  transition: transform 1s ease;
  display: inline-block;
  transform-origin: left;
 }
span:hover {
  transform: scale(1.5);
}

<span>Aravind's Site</span>

- kukkuz

---

这是最合适的解决方案，不需要添加额外的库，在过渡时会使文本有点模糊，特别是在 Webkit 上，但仍然足够好。我看到有人建议在 CSS 中添加 backface-visibility: hidden; 和 transform: translateZ(0);，但我认为使用 SVG 可能会产生更清晰的过渡和边缘。 - Maher Fattouh

就像@MaherFattouh所说的那样，它会在我的浏览器中造成非常糟糕的模糊效果，你甚至无法阅读它（可能是因为字体的原因）。 MaherFattouh，你能发表你的答案吗？它看起来很有用。 - Aravind Suresh Thakidayil

@MaherFattouh的解决方案对我起作用了。模糊已经消失了。 - Aravind Suresh Thakidayil