使用css3过渡平滑动画

Question

我在一个元素中添加了一个字体很棒的用户图标。当我将鼠标悬停在该元素上时，我希望图标大小彻底减小。因此，我使用了过渡作为"所有0.5秒的轻松"。它起作用，但它循序渐进。可以平滑地设置图标的动画吗。

Answer 1

问题是，随着文本大小的减小，悬停目标也会减小，这意味着文本可以达到不再悬停的点，因此它开始再次增长。这可能会造成令人讨厌的视觉锯齿效果。

在下面的示例中，第一个示例使用了不受大小变化影响的"焦点"。第二种使用"悬停"，这很可能受到影响。

单击或选项卡到示例一上，它将平滑地调整大小。试着在第二个例子上徘徊，这将是可怕的。

您可以通过使悬停目标保持恒定大小来解决此问题，因此在动画过程中不会减小悬停目标的大小。

在这个特定区域（调整文本大小）出现锯齿状的其他常见原因有：

• 如果浏览器在调整大小期间难以呈现字体
• 如果前后大小相差不远，并且动画持续时间较长
• 如果前后尺寸相距甚远，并且动画持续时间太短

div {
  font-size: 5em;
  transition: font-size 0.5s ease;
}
div:focus {
  font-size: 0.5em;
}
p {
  font-size: 5em;
  transition: font-size 0.5s ease;
}
p:hover {
  font-size: 0.5em;
}

<div tabindex="0">
  Example One
</div>
<p>
  Example Two
</p>